准备工作

注册高德开放平台
vue整合高德地图需要先在高德开放平台中创建应用添加一个key。如下图所示：

1578015324(1).jpg

创建vue项目，下载高德地图依赖包

npm install vue-amap --save

开始编码

在main.js中添加如下代码：

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '高德开放平台中创建的key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'],
  v: '1.4.4'
});

初始化地图
加载高德地图，设置缩放级别级别、地图中心点经纬度、地图是否可以缩放；

<template>
  <div id="app">
    <div style="width: 1600px; height: 750px;">
      <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
      </el-amap>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        zoom: 5,
        center: [103.82, 36.07]
      }
    }
  }
</script>

<style scoped>

</style>

image.png

设置多个marker点（自定义marker icon）

<template>
  <div id="app">
    <div style="width: 1200px; height: 600px;">
      <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :icon="icon"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        zoom: 5,
        center: [103.82, 36.07],
        icon: require('./images/icon1.png'),
        markers: [
          {
            position: [105.82, 36.07]
          },
          {
            position: [113.55, 37.87]
          },
          {
            position: [115.40, 39.90]
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>

image.png

点击marker点弹出信息窗体

<template>
  <div id="app">
    <div style="width: 1200px; height: 600px;">
      <el-amap vid="amap" :zoom="zoom" :center="center" :zoomEnable="true">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="events" :icon="icon"></el-amap-marker>
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
          :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        zoom: 5,
        center: [103.82, 36.07],
        icon: require('./images/icon1.png'),
        markers: [
          {
            position: [105.82, 36.07]
          },
          {
            position: [113.55, 37.87]
          },
          {
            position: [115.40, 39.90]
          }
        ],
        currentWindow: {
          position: [103.82, 36.07],
          content: '',
          events: {},
          visible: false
        },
        events: {
          click: (e) => {
            this.currentWindow.visible = false;
            this.$nextTick(() => {
              this.currentWindow = {
                position: [e.target.Uh.position.lng, e.target.Uh.position.lat],
                content: `精度: ${e.target.Uh.position.lng}, 纬度: ${e.target.Uh.position.lat}`,
                visible: true,
                events: {}
              };
              this.currentWindow.visible = true;
            });
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>

image.png