vue cli3 構建的項目中使用高德地圖

he_xd 發布于2019-08-23 16:26 / 1515人閱讀

摘要：高德文檔梳理首先，我們要加載外部，在外部加載完畢，然后初始化地圖。加載外部你的初始化地圖初始化地圖的前提是，成功加載外部，然后使用高德提供的對象來構造實例。

高德文檔

https://lbs.amap.com/api/java...

梳理

首先，我們要加載外部js，在外部js加載完畢，然后初始化地圖。

加載外部js

let aMapScript = document.createElement("script")
aMapScript.setAttribute("src", "https://webapi.amap.com/maps?v=1.4.11&key=你的key&plugin=AMap.CitySearch")
document.head.appendChild(aMapScript)

初始化地圖

初始化地圖的前提是，成功加載外部js，然后使用高德提供的 AMap 對象來構造實例。
判斷外部是否加載完畢，aMapScript 對象上有個onload方法，寫法如下：

let self = this
let aMapScript = document.createElement("script")
aMapScript.setAttribute("src", "https://webapi.amap.com/maps?v=1.4.11&key=22bcbed32d531383dd420e8f0a6f2325&plugin=AMap.CitySearch")
document.head.appendChild(aMapScript)
aMapScript.onload=function () {
    self.storeMap = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 10,
    });
}

后邊的話，基本上在這個回調里邊操作就可以了。當然，我們通過this，把構造的地圖實例暴露到外部，這樣，外部直接修改這個實例。

注意：onload 內部，this指向并不是當前vue 組件，所以需要一個變量傳遞一下

vue中引入其他第三方在線庫，基本上是同理的。

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc 高德地圖高德地圖大數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103034.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
Vue.js 中使用高德地圖定位及渲染地圖

摘要：看了上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫運行環境是引入高德地圖一般用使用最簡單粗暴的引入地圖的方法就是，在入口的頭部直接引入，記得一定要帶上如果沒有的話去高德地圖的官網申請一個。看了github上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫.運行環境是vue-cli webpack 引入高德地圖一般用使用vue-cl...

Ku_Andrew 2019-08-21 17:58 評論0 收藏0
vue異步加載高德地圖

摘要：異步加載異步加載指的是為指定加載的回調函數，在的主體資源加載完畢之后，將自動調用該回調函數。幾種加載js的方式同步加載異步加載延遲加載同步加載用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。...

zacklee 2019-08-22 18:08 評論0 收藏0