VUE項目調用高德地圖的詳細步驟
更新時間：2022年05月07日 11:30:04 作者：drinkwd
要在Web頁面中加入地圖,我推薦你使用高德地圖JSAPI,下面這篇文章主要給大家介紹了關于VUE項目調用高德地圖的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
相信大家或多或少都接觸過在大屏的項目，在大屏項目中除了用到了echarts中的行政地圖，街道地圖也是很常見的，今天主要來說一下在vue中調用高德地圖遇到的一些問題??。
申請高德key
無論我們使用任何方式調用高德地圖都需要在高德地圖開放平臺中申請key??
- 注冊帳號
訪問高德地圖開發(fā)平臺根據(jù)實際情況填寫就可以??（實名認證的時候選擇個人就可以，如果是企業(yè)級的項目，可能會涉及人員變動，建議使用公司郵箱進行注冊）區(qū)別如下??。
- 創(chuàng)建應用
新建應用時名稱，與類型可以隨意填寫，盡量填寫的與開發(fā)的應用一直，方便后期維護??
應用創(chuàng)建成功之后，點擊添加就會需要我們選擇需要使用高德地圖的哪些服務，不同的服務平臺，對應填寫的內(nèi)容也有所區(qū)別??，例如Android需要填寫App包名，Android的SHA1碼等等，因為我這次的項目是個大屏項目所以就選擇Web端（JSAPI）??
信息填寫完畢之后就會在當前應用下生成對應的Key值和安全密鑰（安全密鑰在之前的版本中是沒有的）
技術選型
vue-amap是基于 Vue 2.x 與高德的地圖組件????，提供一些基礎和高級的功能，例如：地圖扎點，信息窗體，搜索組件，類型插件等等，不需要我們在造輪子了，所以我們就來試一試??。
準備工作
當我們在使用組件的時候都會先看一下文檔，但是當我在看文檔的時候發(fā)現(xiàn)，文檔中只有對應的api而沒有示例，很難下手，于是在issues中找到了答案。
解決方案也很簡單
- 將項目下載到本地
- 修改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 installnpm start默認在4201端口就會啟動項目就可以看到項目示例了。
項目中應用
- npm安裝
npm install vue-amap --save
- main.js中掛載vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
//申請地址 https://lbs.amap.com/ 選擇web端jsAPI
key: '自己申請的高德地圖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 版本達到 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等可配置的項均寫在配置文件中，方便打包之后進行修改。
module.exports = {
data: function() {
return {
zoom: 12,
center: [121.59996, 31.197646],
events: {
'click': (e) => {
alert('map clicked');
}
},
};
},
};
</script>以上就是在vue項目中使用vue-amap調用高德地圖api的基本使用??，具體對地圖的操作可以根據(jù)文檔的規(guī)范來就可以了，在使用的過程中可能會遇到幾個問題??。
刷新頁面，地圖加載偶爾失敗
- 在main.js中加入以下內(nèi)容。
// 解決地圖刷新顯示不出來
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => {
// console.log(key)
localStorage.removeItem(key)
})在綁定插件的時候，控制臺報錯 a[d].split is not a function
- 含有地圖組件的路由不使用懶加載的方式（臨時方案）
注： vue-amap 是不支持vue3.x，??并且不能綁定高德地圖新版api對應的安全密鑰jscode,可能會導致部分服務無法使用。 對應的vue3版本的插件看這里??。
原生調用高德API
- 安裝官方提供的loader
npm install @amap/amap-jsapi-loader --save
- main.js中綁定安全密鑰jscode（不綁定部分功能無法使用）
// 該寫法只推薦在開發(fā)階段，如果在生產(chǎn)階段建議采用反向代理
// 官網(wǎng)說明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', //設置您的key
version: "2.0", // 高德地圖版本
plugins: ['AMap.ToolBar', 'AMap.Driving'], // 插件
AMapUI: { // 高德地圖UI組件庫，可不寫，內(nèi)部提供了覆蓋物標注點，以及部分模塊的封裝
version: "1.1",
plugins: [],
},
Loca: { // Loca版本(高性能地圖數(shù)據(jù)可視化庫) 可不寫
version: "2.0"
},
}).then((AMap) => {
// container渲染的id
this.map = new AMap.Map("container", {
zoom: 5, // 當前縮放級別
zooms: [2, 22], // 縮放級別范圍
center: [105.602725, 37.076636], // 中心點
});
}).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混合使用）
- 只想通過 vue-amap 引入高德地圖，而部分實例化的操作直接基于高德地圖的 sdk 完成
實例化操作不是加載地圖，簡單來說就是用一些屬性去實例化地圖的這個類 new xxx() 代表的就是實例化xxx??。這樣就不需要在使用el-amap中的center屬性和zoom屬性了??，因為已經(jīng)通過原生的方式進行實例化了??。
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實例文檔地址
<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>總結
網(wǎng)上針對高德地圖的調用方案也有很多，我也是剛剛接觸，文中的觀點都是自身的看法，最后說一下自身對選型的判斷??。
- 如果是大屏類的項目，沒有過多的交互只是簡單扎點，展示建議使用vue-amap??????。
- 如果是已地圖為中心的項目，包括人員路線，軌跡等等比較復雜的交互建議使用原生??????。
參考鏈接
到此這篇關于VUE項目調用高德地圖的文章就介紹到這了,更多相關VUE調用高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Openlayer實現(xiàn)圖形的拖動和旋轉變形效果
Openlayer具有自己的擴展插件ol-ext，可以用來實現(xiàn)圖形的拖拽、旋轉、縮放、拉伸、移動等操作，本文將主要介紹通過Openlayer實現(xiàn)圖形的拖動和旋轉，需要的同學可以學習一下2021-11-11
這篇文章主要介紹了vue 登錄滑動驗證實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家介紹了vue3.2?Composition?API項目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue中echarts@4.9版本地圖的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。2017-03-03
本文通過實例給大家介紹了Vue中使用webpack別名的方法,非常不錯，具體一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
下面小編就為大家分享一篇vue 頁面加載進度條組件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08