1、报错ReferenceError: AMap is not defined
通常script应该放到body后，但是地图引入放到body后，刷新页面时，报错：
ReferenceError: AMap is not defined
因为加载app的时候调用了AMap，你放到后面AMap是啥啊？当然未定义报错了。
所以需要把引入：
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>
放到head和body之间。
2、高德地图应用web端和web服务的选择
web服务：
web端：
初次使用，一看这个web服务这么多内容，那当然是它咯，其实不是的。
我的理解是：
web端就是界面要加载高德地图，进行一些简单的定位、展示；
web服务就是需要调用一些地图服务，比如搜索周边一些详细资讯等。
而我要实现的是，界面加载地图，并定位一些点，获取坐标添加一些标记即可，当然是web端啦。
3、使用高德地图remark绑定点击事件的问题
问题代码
<div id="test" style="display:none;">
<demo-test ref="infoTest"></demo-test>
</div>
let map = null
let markers = [] // 定义到vue之外的全局变量
// 构造标记点
let self = this
for (let i = 0; i < dataJson.points.length; i++) {
let onemark = new AMap.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: [dataJson.points[i].longitude, dataJson.points[i].latitude],
title: dataJson.points[i].name,
topWhenClick: true
})
onemark.on('click', self.clickRemark)
// AMap.event.addListener(onemark, 'click', self.clickRemark)
markers.push(onemark)
}
clickRemark (val) {
let self = this
console.log(self.$refs.infoTest, 111)
console.log(self.$refs.infoTest.$el, 222)
}
destroyed () {
if (map) {
map.destroy()
map = null
}
}
现象
刷新页面进来，点击事件正常，能够拿到dom节点进行渲染。
再次路由跳转进来，点击事件异常，拿不到dom节点进行渲染。
但是，dom节点明明存在啊。
再但是，click方法里打印dom就是未定义啊。
头大。。。
分析
无论在click绑定的clickRemark()函数中通过$refs获取dom还是通过id获取dom；
无论是$nextTick函数打印还是用setTimeout()延缓打印，都存在同样的问题。
但是只要放到clickRemark()函数以外打印出来的都是正常的，所以绑定click函数出了问题啊。
即便换用AMap.event.addListener(onemark, 'click', self.clickRemark)还是一样的现象。
结果
然后想了想初次加载可以，再次加载不可以，那markers变量两次有什么不同吗？
打印一看哦哟，markers数组一直在追加啊！
刷新当前页面markers初始为[]就没问题；路由跳转markers进来一次追加一次，里面的对象还都是重复的，所以点击 的时候clickRemark就错乱了。
醉了醉了，果然如此。
教训
全局变量，切记要！销！毁！
话说回来，单页面应用先看是否需要一直存在成全局变量啊，全局变量一般不销毁。
总之非必须长期存在的、能交给vue管理的变量应该交给vue，挂在vue上定义就好了。
4、地图搜索框AMap.PlaceSearch的问题
问题1：搜索内容框不出来
参考官方案例写的，但是输入关键字后搜索内容框就是不出来。
原因：
- 1、如果地图在弹出框（el-dialog）中加载的，考虑搜索内容框被弹框的某一层遮住了！
- 2、看看有没有收到高德的短信，免费用户接口调用量已达配额！
问题2：搜索框导致amap-sug-result节点一直存在
加载地图搜索框后，即便关闭销毁了地图，界面还是存在节点：amap-sug-result
<div class="amap-sug-result" style="visibility: hidden;"></div>
该div虽然visibility: hidden;但是会导致页面高度变化，顶出了滚动条。
设置.amap-sug-result的border: none;即可。
.amap-sug-result {
border: none;
}
