距離上一篇關(guān)于前端項(xiàng)目中使用高德地圖的文章已經(jīng)將近5年之久，
這是我的第一篇關(guān)于高德地圖的文章
這期間前端技術(shù)日新月異，5年前JQuery還如日中天，如今已經(jīng)銷聲匿跡，很少有公司招聘還在要求JQuery，更多的是Vue、React。
如今更多采用模塊化開(kāi)發(fā)，結(jié)合webpack、vite，我們可以按照業(yè)務(wù)功能拆分模塊。
我們可以把高德地圖相關(guān)功能封裝成功能模塊，在使用時(shí)按需引入即可。
本教程使用ESM開(kāi)發(fā)，如果還不熟悉該語(yǔ)法，請(qǐng)盡快學(xué)習(xí)。
前期準(zhǔn)備工作
- 首先成為開(kāi)發(fā)者
- 注冊(cè)完登錄 創(chuàng)建新應(yīng)用
- 創(chuàng)建key
填入相關(guān)信息
- 生成key和安全秘鑰
key和安全秘鑰，在地圖模塊初始化時(shí)需要用到
至此，前期準(zhǔn)備工作已經(jīng)完成。
模塊化引入
安裝高德地圖包 npm i @amap/amap-jsapi-loader
步驟
- 提供一個(gè)地圖掛載點(diǎn)，并設(shè)置寬高
- 引入地圖加載方法，執(zhí)行l(wèi)oad方法，返回AMap構(gòu)造函數(shù)
- 實(shí)例化構(gòu)造函數(shù)，生成地圖實(shí)例
模塊加載
本地新建js文件，后續(xù)頁(yè)面內(nèi)使用地圖功能，可以導(dǎo)入該模塊
// gmap.js
import AMapLoader from '@amap/amap-jsapi-loader'
結(jié)合安全秘鑰使用
Nginx配置
// gmap.js
// 需要在地圖初始化加載前，設(shè)置該項(xiàng)
window._AMapSecurityConfig = {
// 需要服務(wù)器配置，代理高德地圖相關(guān)地址，路徑固定為 ‘ /_AMapService ’
serviceHost:'http://xxxxxx/_AMapService',
}
初始化配置
// gmap.js
const AMap = await AMapLoader.load({
"key": "xxxxxxxxxxxx", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
"version": "2.0", // 指定要加載的 JS API 的版本，缺省時(shí)默認(rèn)為 1.4.15
"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
實(shí)例化
// 實(shí)例化該構(gòu)造函數(shù)，在調(diào)用該方法時(shí)，傳入?yún)?shù)
const map = new AMap.Map(domContainer = 'map', options = {});
可以自己進(jìn)行模塊封裝
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
serviceHost:'http://xxxxxx/_AMapService', // 自己的服務(wù)器地址 結(jié)合安全密鑰使用
}
AMapLoader.load({
"key": "xxxxxxxxxx", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
"version": "2.0", // 指定要加載的 JS API 的版本，缺省時(shí)默認(rèn)為 1.4.15
"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then(AMap => {
const map = new AMap.Map('container', {
viewMode: '3D', // 默認(rèn)使用 2D 模式
zoom: 11, //初始化地圖層級(jí)
center: [116.397428, 39.90923] //初始化地圖中心點(diǎn)
});
})
頁(yè)面中使用地圖模塊
在vue頁(yè)面中使用該模塊
- 首先在頁(yè)面中添加元素作為掛載點(diǎn)
- 并設(shè)置寬高（必須）
引入該模塊，并初始化地圖
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
serviceHost:'http://xxxxxx/_AMapService', // 自己的服務(wù)器地址 結(jié)合安全密鑰使用
}
export default {
name: "",
data(){
return {
map: null,
}
},
mounted() {
this.mapInit()
},
methods: {
mapInit () {
AMapLoader.load({
"key": "xxxxxxxxxx", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
"version": "2.0", // 指定要加載的 JS API 的版本，缺省時(shí)默認(rèn)為 1.4.15
"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then(AMap => {
this.map = new AMap.Map('container', {
viewMode: '3D', // 默認(rèn)使用 2D 模式
zoom: 11, //初始化地圖層級(jí)
center: [116.397428, 39.90923] //初始化地圖中心點(diǎn)
});
this.map.on('complete', () => {
console.log('地圖加載完畢')
})
})
}
},
beforeDestroy () {
this.map.destroy()
},
}
</script>
<style scoped>
#map {
width: 200px;
height: 200px;
}
</style>
至此，頁(yè)面上已經(jīng)成功顯示地圖
地圖加載完成事件
this.map.on('complete', ()=> {
// 地圖圖塊加載完成后，觸發(fā)該回調(diào)
})
頁(yè)面銷毀，需要銷毀地圖
提升性能，釋放內(nèi)存占用，當(dāng)前地圖容器被清空。
在頁(yè)面卸載生命周期中，執(zhí)行地圖銷毀事件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-682114.html
beforeDestroy () {
this.map.destroy();
}
未完待續(xù)。。。
如果有什么業(yè)務(wù)上相關(guān)的問(wèn)題，也可以留言。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-682114.html
到了這里，關(guān)于前端vue引入高德地圖入門(mén)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
