這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中引入高德地圖，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)成立與2013年，先為東海等服務(wù)建站，東海等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東海企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

引入高德地圖：

打開index.html，引用高德地圖的JavaScript API：

在“key=”這里添加你申請(qǐng)的key，key不需要加引號(hào)。

引入高德地圖UI組件，只需要在上面代碼后面再加一串代碼：

配置webpack

打開webpack.base.conf.js文件，找到module.exports，在externals對(duì)象中加入一行：'AMap': ‘AMap'

externals: {
 'AMap': 'AMap',
},

至此引入的步驟已完成，創(chuàng)建一個(gè)vue文件

 .mymap{
  width: 300px;
  height: 300px;
 }

運(yùn)行，不出意外就可以看到地圖了：

如果使用高德地圖UI組件，在加載地圖的同時(shí)加載UI組件就可以了：

loadmap(){
 const map = new AMap.Map('container', {
  zoom: 9
 });
 AMapUI.loadUI(...)  //加載UI組件
}

關(guān)于怎么在vue中引入高德地圖就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：怎么在vue中引入高德地圖-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/hggsh.html