vue中引用高德地图

高德地图开放平台：

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1. 在index.html中引入高德地图，并替换key值

<script src="https://webapi.amap.com/maps?v=1.3&key=                   &plugin=AMap.Autocomplete">

2.在页面中直接使用

<template>
  <div>
    <p>jsmap</p>
    <div id="mapBox" class="ppp"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mapData: {
        center: [104.063266, 30.578026],
        zoom: 12
      }
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      let self = this;
      let map = new AMap.Map("mapBox", {
        zoom: self.mapData.zoom,
        resizeEnable: true,
        center: self.mapData.center
      });

      let marker = new AMap.Marker({
        position: self.mapData.center,
        map: map
      });
    }
  }
};
</script>
<style>
.ppp {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid deeppink;
}
</style>

3. 更多的功能请自行学习api