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