前言

几年没碰过前端了，最近闲来无事在捣鼓一个小项目，项目中一个功能涉及到地图组件，没想到在集成高德地图时遇到好几个问题，耗时3小时最终攻克，遂特此记录。如果有跟我同样情况的，希望可以帮助到你。

集成地图实现的功能

集成地图是为了实现一个功能：用户可以点击地图设置门店地址，并提供给后端省、市、区、详细地址、行政编码、经纬度等，这样前端可以减少设置地址的操作步骤。

为实现这个功能，要在高德地图组件实现以下几个功能：

1. 地图实现搜索功能，快速定位目标地点。
2. 在地图上点击可以返回地理数据。
3. 在点击的地图上添加一个标记，标识用户选择的位置。

高德地图提供的插件 AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.Geolocation 和监听事件 click 以及 Marker 组件可以实现以上几个功能。

遇到的问题

Uncaught Error: Invalid Object: LngLat(NaN, NaN)

按照官网给的示例在本地运行，结果控制台报了个错，地图没有加载出来。

代码如下

<div id="mapcontainer"></div>
window._AMapSecurityConfig = {
        securityJsCode: "",
      };
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], 
      })
        .then((AMap) => {
          var option={
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
          }
          this.map = new AMap.Map("mapcontainer",option);
        })
        .catch((e) => {
          console.log(e);
        });

看到这个错误以为是经纬度的问题，打死我也没想到是容器高度问题，最后给mapcontainer设置了高度解决。

#mapcontainer {
  width: 100%;
  height: 400px;
}

这是我的问题还是我的问题？

搜索结果不显示

为了能让用户快速定位目标地点，需要实现搜索功能，实现的效果如下。

还这官网给的示例。

按照官网给的示例把代码搬到项目后，输入提示并没有显示出来。

控制台也没有任何报错，我以为示例代码有问题，检查了插件使用、对比示例代码。

排查了半天，最后发现z-index的问题。

因为项目中有元素z-index是2000，覆盖了搜索提示元素。

将amap-sug-result的z-index属性设置高于该值解决问题。

/*地图搜索结果*/
.amap-sug-result {
  z-index: 2999 !important;
}

**注意：**不能在<style scoped>中设置，因为包含scoped的style最终会添加一个唯一的属性，这样就会导致样式不会被识别。

地图异步加载问题

编辑操作涉及到标记回显到地图上，只能等待 AMapLoader.load 异步加载完成后再执行添加标记操作。

本来是在handleUpdate直接调用addMaker，最后以initAMap传递参数方式处理这个问题。

	handleUpdate(row) {
	      this.reset();
	      const id = row.id || this.ids
	      getXXX(id).then(response => {
			...
	        this.initAMap(addressjson["coordinate"].split(","));
	      });
	},
    initAMap(lnglat) {
      var $this=this;
      window._AMapSecurityConfig = {
        ...
      };
      AMapLoader.load(...)
        .then((AMap) => {
          if(lnglat){
            $this.addMaker(lnglat)
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
	addMakre(lnglat){
	var marker = new AMap.Marker({
		        position: new AMap.LngLat(lnglat[0],lnglat[1]),
		        offset: new AMap.Pixel(-10, -10),
		        icon: 'https://vdata.amap.com/icons/b18/1/2.png'
	     	 });
			$this.map.add(marker);
	}

不知道各位都是怎么处理的。

写在最后

花费我三个小时解决，主要还是没有经验的原因。不知道各位前端大佬在遇到这些个问题是怎么高效排查并解决的，深刻体会到经验的重要性。