在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
export default {
    
    
  mounted() {
    
    
    this.MapInit();
  },
  methods: {
    
    
    //初始化高德地图
    MapInit() {
    
    
      mapObj = new AMap.Map("mapId", {
    
    
        zoom: 12, //缩放级别
        center: [116.39, 39.9], //地图中心点
      });
      //然后你还可以加载高德的一些插件，加载插件的时候注意下作用域问题，绑在那个变量里面，因为要保证后面一些事件调用这些插件
      AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function() {
    
    
        //异步同时加载多个插件
        var toolbar = new AMap.ToolBar();
        mapObj.addControl(toolbar);
        var driving = new AMap.Driving(); //驾车路线规划
        driving.search(/*参数*/);
      });
    },
  },
};
</script>

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

这个时候就可以使用了

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！