基本配置
1:在vue项目中下载vue-amap
npm install vue-amap --save
文档连接
2: 在main.js引入高德地图
import VueAMap from 'vue-amap';
//注册高德
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '****',//这里是你的高德开发者key
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4'
});
复制代码
使用高德地图 vue-amap报错
地图组件F5刷新会报错 控制台输入
Uncaught (in promise) TypeError: v.w.uh is not a constructor
Uncaught TypeError: l is not a function
//在main.js增加这段话 (能清除之前缓存的地图信息)
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => {
// console.log(key)
localStorage.removeItem(key)
})
Vue.use(VueAMap)
复制代码
有时地图加载后经纬度返回到地图会提示地图某方法不存在
1:在html中增加事件
vid="skyeye_amapDemo"
id="skyeye_amapDemo"
:events="mapEvents"
:amap-manager="amapManager"
>
2:data中
mapEvents: {
init (o) {
lazyAMapApiLoaderInstance.load().then(() => {
o.setMapStyle("amap://styles/grey"); //自定义的高德地图的样式,我选的是马卡龙
$this.hasDom = true
})
},
},