vue使用高德地图画电子围栏_高德地图的使用 vue-amap+vue

基本配置

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

})

},

},

在watch中监听hasDom 如果值返回了 再次把经纬度的数据放