几年没碰过前端了，Vue集成高德地图花费我三个小时。
原创几年没碰过前端了，Vue集成高德地图花费我三个小时。
原创
前言
几年没碰过前端了，最近闲来无事在捣鼓一个小项目，项目中一个功能涉及到地图组件，没想到在集成高德地图时遇到好几个问题，耗时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);
}不知道各位都是怎么处理的。
写在最后
花费我三个小时解决，主要还是没有经验的原因。不知道各位前端大佬在遇到这些个问题是怎么高效排查并解决的，深刻体会到经验的重要性。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。