VUE項(xiàng)目中調(diào)用高德地圖的全流程講解
前言
相信大家或多或少都接觸過(guò)在大屏的項(xiàng)目，在大屏項(xiàng)目中除了用到了echarts中的行政地圖，街道地圖也是很常見的，今天主要來(lái)說(shuō)一下在vue中調(diào)用高德地圖遇到的一些問(wèn)題。
申請(qǐng)高德key
無(wú)論我們使用任何方式調(diào)用高德地圖都需要在高德地圖開放平臺(tái)中申請(qǐng)key
注冊(cè)帳號(hào)
訪問(wèn)高德地圖開發(fā)平臺(tái)根據(jù)實(shí)際情況填寫就可以（實(shí)名認(rèn)證的時(shí)候選擇個(gè)人就可以，如果是企業(yè)級(jí)的項(xiàng)目，可能會(huì)涉及人員變動(dòng)，建議使用公司郵箱進(jìn)行注冊(cè)）區(qū)別如下。
創(chuàng)建應(yīng)用
新建應(yīng)用時(shí)名稱，與類型可以隨意填寫，盡量填寫的與開發(fā)的應(yīng)用一直，方便后期維護(hù)
應(yīng)用創(chuàng)建成功之后，點(diǎn)擊添加就會(huì)需要我們選擇需要使用高德地圖的哪些服務(wù)，不同的服務(wù)平臺(tái)，對(duì)應(yīng)填寫的內(nèi)容也有所區(qū)別，例如Android需要填寫App包名，Android的SHA1碼等等，因?yàn)槲疫@次的項(xiàng)目是個(gè)大屏項(xiàng)目所以就選擇Web端（JSAPI）
信息填寫完畢之后就會(huì)在當(dāng)前應(yīng)用下生成對(duì)應(yīng)的Key值和安全密鑰（安全密鑰在之前的版本中是沒(méi)有的）
技術(shù)選型
vue-amap
vue-amap是基于 Vue 2.x 與高德的地圖組件，提供一些基礎(chǔ)和高級(jí)的功能，例如：地圖扎點(diǎn)，信息窗體，搜索組件，類型插件等等，不需要我們?cè)谠燧喿恿?，所以我們就?lái)試一試。
準(zhǔn)備工作
當(dāng)我們?cè)谑褂媒M件的時(shí)候都會(huì)先看一下文檔，但是當(dāng)我在看文檔的時(shí)候發(fā)現(xiàn)，文檔中只有對(duì)應(yīng)的api而沒(méi)有示例，很難下手，于是在issues中找到了答案。
解決方案也很簡(jiǎn)單
將項(xiàng)目下載到本地
修改src/docs/index.html里的docsify引用
將
<script src="http://unpkg.com/docsify/lib/docsify.min.js"></script>
修改為
<script src="http://unpkg.com/docsify@4.11.6/lib/docsify.min.js"></script>?
執(zhí)行npm install npm start默認(rèn)在4201端口就會(huì)啟動(dòng)項(xiàng)目就可以看到項(xiàng)目示例了。
項(xiàng)目中應(yīng)用
npm安裝
npm install vue-amap --save
main.js中掛載vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
//申請(qǐng)地址 https://lbs.amap.com/ 選擇web端jsAPI
key: '自己申請(qǐng)的高德地圖key',
// 插件集合，用到什么插件就使用什么插件
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4', // 高德sdk版本，最新的sdk已經(jīng)出到了2.0
//官網(wǎng)解釋：JSAPI 2.0 提供的開發(fā)接口與 1.4 版本達(dá)到 99%的兼容度，但是為了保證插件的穩(wěn)定性我們還是選擇1.4.4。
})
組件用法
<template>
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :events="events" class="amap-demo">
</el-amap>
</template>
<script> // 建議將zoom,center等可配置的項(xiàng)均寫在配置文件中，方便打包之后進(jìn)行修改。
module.exports = {
data: function() {
return {
zoom: 12,
center: [121.59996, 31.197646],
events: {
'click': (e) => {
alert('map clicked');
}
},
};
},
}; </script>
以上就是在vue項(xiàng)目中使用vue-amap調(diào)用高德地圖api的基本使用，具體對(duì)地圖的操作可以根據(jù)文檔的規(guī)范來(lái)就可以了，在使用的過(guò)程中可能會(huì)遇到幾個(gè)問(wèn)題。
刷新頁(yè)面，地圖加載偶爾失敗
在main.js中加入以下內(nèi)容。
// 解決地圖刷新顯示不出來(lái)
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => {
// console.log(key)
localStorage.removeItem(key)
})
在綁定插件的時(shí)候，控制臺(tái)報(bào)錯(cuò) a[d].split is not a function
含有地圖組件的路由不使用懶加載的方式（臨時(shí)方案）
注： vue-amap 是不支持vue3.x，并且不能綁定高德地圖新版api對(duì)應(yīng)的安全密鑰jscode,可能會(huì)導(dǎo)致部分服務(wù)無(wú)法使用。 對(duì)應(yīng)的vue3版本的插件看這里。
原生調(diào)用高德API
安裝官方提供的loader
npm install @amap/amap-jsapi-loader --save
main.js中綁定安全密鑰jscode（不綁定部分功能無(wú)法使用）
// 該寫法只推薦在開發(fā)階段，如果在生產(chǎn)階段建議采用反向代理
// 官網(wǎng)說(shuō)明https://lbs.amap.com/api/javascript-api/guide/abc/prepare
window._AMapSecurityConfig = {
securityJsCode: 'jscode' // 輸入你的jscode
}
封裝組件
<template>
<div class="home_div">
<div id="container"></div>
</div>
</template>
<script> import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: "Mapview",
data() {
return {
map: null,
}
},
created() {
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: 'xxx', //設(shè)置您的key
version: "2.0", // 高德地圖版本
plugins: ['AMap.ToolBar', 'AMap.Driving'], // 插件
AMapUI: { // 高德地圖UI組件庫(kù)，可不寫，內(nèi)部提供了覆蓋物標(biāo)注點(diǎn)，以及部分模塊的封裝
version: "1.1",
plugins: [],
},
Loca: { // Loca版本(高性能地圖數(shù)據(jù)可視化庫(kù)) 可不寫
version: "2.0"
},
}).then((AMap) => {
// container渲染的id
this.map = new AMap.Map("container", {
zoom: 5, // 當(dāng)前縮放級(jí)別
zooms: [2, 22], // 縮放級(jí)別范圍
center: [105.602725, 37.076636], // 中心點(diǎn)
});
}).catch(e => {
console.log(e);
})
},
}
} </script>
<style scoped> .home_div {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: relative;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: absolute;
} </style>
混合使用（vue-amap與原生API混合使用）
只想通過(guò) vue-amap 引入高德地圖，而部分實(shí)例化的操作直接基于高德地圖的 sdk 完成
實(shí)例化操作不是加載地圖，簡(jiǎn)單來(lái)說(shuō)就是用一些屬性去實(shí)例化地圖的這個(gè)類 new xxx() 代表的就是實(shí)例化xxx。這樣就不需要在使用el-amap中的center屬性和zoom屬性了，因?yàn)橐呀?jīng)通過(guò)原生的方式進(jìn)行實(shí)例化了。
import { lazyAMapApiLoaderInstance } from 'vue-amap';
lazyAMapApiLoaderInstance.load().then(() => {
// your code ...
this.map = new AMap.Map('amapContainer', {
center: new AMap.LngLat(121.59996, 31.197646)
});
});
在vue-amap中引入高德原生SDK只需在el-amap上綁定amap-manager就可以拿到高德原生AMap.Map實(shí)例文檔地址
<template>
? <div class="amap-page-container">
? ? <el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom"
? ? ? class="amap-demo">
? ? </el-amap>
? ? <div class="toolbar">
? ? ? <button @click="add()">add marker</button>
? ? </div>
? </div>
</template>
? <style> .amap-demo {
? height: 300px !important;
} </style>
? <script> // NPM 方式
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
export default {
? data: function () {
? ? return {
? ? ? zoom: 12,
? ? ? center: [121.59996, 31.197646],
? ? ? amapManager,
? ? };
? },
? methods: {
? ? add() {
? ? ? let o = amapManager.getMap();
? ? ? let marker = new AMap.Marker({
? ? ? ? position: [121.59996, 31.177646]
? ? ? });
? ? ? marker.setMap(o);
? ? }
? }
}; </script>?總結(jié)
網(wǎng)上針對(duì)高德地圖的調(diào)用方案也有很多，我也是剛剛接觸，文中的觀點(diǎn)都是自身的看法，最后說(shuō)一下自身對(duì)選型的判斷。
如果是大屏類的項(xiàng)目，沒(méi)有過(guò)多的交互只是簡(jiǎn)單扎點(diǎn)，展示建議使用vue-amap。
如果是已地圖為中心的項(xiàng)目，包括人員路線，軌跡等等比較復(fù)雜的交互建議使用原生。
參考鏈接
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法的相關(guān)資料,這里提供了解決問(wèn)題的詳細(xì)步驟，具有一定的參考價(jià)值，需要的朋友可以參考下2017-07-07
Vue3實(shí)現(xiàn)全局loading指令的示例詳解
這篇文章主要介紹了Vue3實(shí)現(xiàn)全局loading指令,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁(yè)面的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ的示例詳解
這篇文章為大家詳細(xì)主要介紹了如何基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ, 讓消息延遲消費(fèi)或者做緩存,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-02-02
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue如何循環(huán)請(qǐng)求一個(gè)接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在Vue里渲染一塊內(nèi)容，會(huì)有四個(gè)流程步驟，那么該怎么理解這個(gè)流程呢，所以本文就給大家詳細(xì)講解一下Vue 渲染流程，文中有纖細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-07-07
詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐
這篇文章主要介紹了詳解Jest結(jié)合Vue-test-utils使用的初步實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue3.0 proxy設(shè)置代理不成功的問(wèn)題及解決方案
這篇文章主要介紹了vue3.0 proxy設(shè)置代理不成功的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12