在vue項(xiàng)目中引入高德地圖及其UI組件的方法
更新時(shí)間：2018年09月04日 09:51:24 作者：shuaizi96
今天小編就為大家分享一篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
引入高德地圖：
打開(kāi)index.html，引用高德地圖的JavaScript API：
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script>
在“key=”這里添加你申請(qǐng)的key，key不需要加引號(hào)。
引入高德地圖UI組件，只需要在上面代碼后面再加一串代碼：
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
配置webpack
打開(kāi)webpack.base.conf.js文件，找到module.exports，在externals對(duì)象中加入一行：'AMap': ‘AMap'
externals: {
'AMap': 'AMap',
},
至此引入的步驟已完成，創(chuàng)建一個(gè)vue文件
<template>
<div id="container" class="mymap"></div>
</template>
<script>
import AMap from 'AMap'; //在頁(yè)面中引入高德地圖
export default {
mounted(){
this.loadmap(); //加載地圖和相關(guān)組件
},
methods: {
loadmap(){
const map = new AMap.Map('container', {
zoom: 9
});
}
}
}
</script>
<style scoped>
.mymap{
width: 300px;
height: 300px;
}
</style>
運(yùn)行，不出意外就可以看到地圖了：
如果使用高德地圖UI組件，在加載地圖的同時(shí)加載UI組件就可以了：
loadmap(){
const map = new AMap.Map('container', {
zoom: 9
});
AMapUI.loadUI(...) //加載UI組件
}
組件里的內(nèi)容根據(jù)需求自定，各組件在高德地圖官網(wǎng)有demo，可以直接粘進(jìn)來(lái)用。
以上這篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法
最近使用vue+elementUI做項(xiàng)目,使用過(guò)程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法,需要的朋友可以參考下2024-08-08
vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新
今天小編就為大家分享一篇vue實(shí)現(xiàn)修改圖片后實(shí)時(shí)更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通常可以使用插槽來(lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-08-08
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
vue項(xiàng)目中使用this.$confirm解析
這篇文章主要介紹了vue項(xiàng)目中使用this.$confirm方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁(yè)面,實(shí)現(xiàn)方式是將其他頁(yè)面作為組件傳入，在父頁(yè)面將該組件引入到彈框內(nèi)，實(shí)例代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11
Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch
這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07