隨着時間流逝，人的初心是否會改變呢？今日博客分享vue引入高德地圖幾種方式~
1、方式一，引用封裝好的vue-amap組件，具體操作見官方文檔
官網鏈接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
npm install vue-amap --save
由於vue-amap封裝的功能有限，因此不可避免的需要引入高德地圖的cdn鏈接
2、網上已經普遍有一種引入方式，具體如下
（1）進入當前vue目錄下的index.html直接引入cdn鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
<!--高德地圖js-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申請的key值&callback=onLoad"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
（2）配置build/webpack.base.conf.js,在module.export中加入externals配置項，當做外部資源引入，據說有如下注釋的功能，但是在開發環境貌似感覺沒啥區別。。。
externals:{
"AMap":'AMap'
//key是項目內使用組件的名稱，value是高德對外暴露的名稱（這樣配置的話webpack在dev run dev或者run build的時候就不會去本地組件包查找該資源，而是直接去windown域下載）
},
3、上面的方式網頁一進入index.html文件，高德地圖資源便會進行加載，那麼問題來了，當我頁面只有一個組件需要用到高德地圖，想實現只有進入到某個特定組件時，才請求高德地圖cdn鏈接，如何做到按需加載呢?經過嘗試有以下兩種方法
方法一：通過引入webpack-require-http插件配合require引入，注意2.1版本require(['']，function(){})是異步加載，之前 require('') 同步加載，同步加載一直加載報錯，最終實現如下
（1）引入webpack-require-http插件，還是當做外部資源引入這個插件，配置build/webpack.base.conf.js,在module.export中加入externals配置項
externals:[
//注意這裏是[]
require('webpack-require-http')
]
（2）vue文件中引入
<template>
<div>
<button @click="getMap">獲取map對象</button>
<div id="map" style="width:100%;height:800px"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
export default {
data() {
return {
mapObj: null
}
},
methods: {
getMap() {
console.log("this map obj", this.mapObj);
}
},
beforeMount() {
require(["https://webapi.amap.com/maps?v=1.4.14&key=您申請的key值"],()=>{
setTimeout(()=>{
var map = new AMap.Map('map', {
resizeEnable: true, //是否監控地圖容器尺寸變化
zoom: 11, //初始化地圖層級
center: [116.397428, 39.90923] //初始化地圖中心點
});
},1500);
})
},
destroyed(){
console.log("destroyed");
}
}
</script>
方法二：動態的給index.html頭部加入高德地圖資源
（1）直接在組件內部引入即可，一步操作即可實現
<template>
<div>
<button @click="getMap">獲取map對象</button>
<div id="map" style="width:100%;height:800px"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
export default {
data() {
return {
mapObj: null
}
},
methods: {
getMap() {
console.log("this map obj", this.mapObj);
}
},
mounted() {
},
beforeMount() {
let $self = this;
window.onLoad = function () {
var map = new AMap.Map('map', {
resizeEnable: true, //是否監控地圖容器尺寸變化
zoom: 11, //初始化地圖層級
center: [116.397428, 39.90923] //初始化地圖中心點
});
AMap.plugin('AMap.ToolBar', function () {//異步加載插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
$self.mapObj = map;
}
var url = 'https://webapi.amap.com/maps?v=1.4.14&key=您申請的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
jsapi.id = "amapjs";
document.head.appendChild(jsapi);
},
destroyed() {
document.getElementsByTagName("head")[0].removeChild(
document.getElementById("amapjs"));
console.log("destroyed");
}
}
以上方法在進入引用的組件時候纔會加載出高德地圖，在vue上面引入插件，建議通過異步加載插件引入，由於是操作到了index.html高德地圖已經出現就會保留，只有頁面刷新時候index.html頭部資源纔會消失，因此若是想實現跳出組件地圖實時刪除請在vue聲明週期destroy中進一步操作。