vue中使用高德地图

1.首先在官网申请密钥:https://lbs.amap.com申请密钥

2. 在index.html中引用js文件，在头部引入

3.在 webpack.config.js 配置文件中配置AMap
entry: {
app: ‘./src/main.js’
},
externals:｛
“AMap”: “AMap”,
}
4.在引用地图的组件中创建一个容器，定义容器的宽高

.map{ width: 600px; height: 600px; }

5.在引用地图的组件中引入AMap，否则会报”AMap undefined”的错误
import AMap from ‘AMap’
6.在methods中定义创建地图的方法
GaodeMap(){
var map = new AMap.Map(‘all-map’, {
center: [116.397428, 39.90923], // [纬度，经度]
resizeEnable: true,
zoom: 10
});
AMap.plugin([‘AMap.ToolBar’, ‘AMap.Scale’], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
}
7.在mounted生命周期中调用刚刚定义好的方法
mounted(){
this.GaodeMap()
}
然后会出现下面的效果：

完整代码

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.GaodeMap();
  },
  methods: {
    GaodeMap() {
      let AMap = window.AMap;
      var map = new AMap.Map("container", {
        center: [116.397428, 39.90923], // [纬度，经度]
        resizeEnable: true,
        zoom: 10
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function() {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
      });
    }
  }
};
</script>

<style>
#container {
  width: 300px;
  height: 180px;
}
</style>