1. 程式人生 > >vue結合vue-amap呼叫高德地圖api

vue結合vue-amap呼叫高德地圖api

1、到高德地圖開放平臺申請key
2、npm安裝vue-amap
在這裡插入圖片描述
3、在main.js中引入並初始化
在這裡插入圖片描述在這裡插入圖片描述
4、以獲取周邊資訊為例,PlaceSearch的官方文件
在這裡插入圖片描述
在這裡插入圖片描述在這裡插入圖片描述
5、展示結果
在這裡插入圖片描述在這裡插入圖片描述
6、上面方式是根據設定的經緯度獲取周邊資訊,如果想實時獲取當前位置可以這樣,在data中新增一個plugin
在這裡插入圖片描述

注意:created呼叫getnearinfo時如果不加setTimeout的話會出現類似如下的間歇性報錯。原因是因為AMap初始化是個非同步過程,在AMap還沒初始化完成時就呼叫了它,所以就不存在了。解決辦法也很簡單,給使用AMap的方法加個setTimeout延後一點時間呼叫就可以了
在這裡插入圖片描述