在Vue中使用高德地圖開發工具

在Vue中使用高德開發工具非常簡單，只需要在你的public中的index.html中，導入一條鏈接即可。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script> 

一般使用高德地圖中，裏面有各種各樣的插件，你可以直接在鏈接上跟上插件名，直接同步加載插件。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&plugin=AMap.ToolBar,AMap.Driving"></script> 

具體可以看下官方文檔，講的很詳細
https://lbs.amap.com/api/javascript-api/guide/abc/plugins

然後在在vue.config.js中加入高德的配置，如果沒有這個js文件，你可以在項目根目錄新建一個就好了

module.exports = {
    configureWebpack(config) {
        config.externals = {
            'AMap': 'AMap', // 高德地圖配置
        }
    }
}

使用的時候

<template>
  <div class="map_box">
    <div
      class="map"
      id="map"
    >
    </div>
  </div>
</template>

<script>
import AMap from "AMap"
var map
mounted() {
    this.MapInit()
},
methods: {
	//初始化高德地圖
	MapInit(){
		map = new AMap.Map('map',{
          zoom:12,	//縮放級別
          center:[116.39,39.9]  //地圖中心點
    	});
		//然後你還可以加載高德的一些插件，加載插件的時候注意下作用域問題，綁在那個變量裏面，因爲要保證後面一些事件調用這些插件
	AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//異步同時加載多個插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
      var driving = new AMap.Driving();//駕車路線規劃
      driving.search(/*參數*/)
  	});
	}
	
}
</script>

<style>
.map {
  width: 100%;
  height: 600px;
}
</style>

這個時候就可以使用了

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！