引用高德地图 在public里html引入js

<script type="text/javascript"
              src="https://webapi.amap.com/maps?v=1.4.15&key=your key"
      ></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

创建组件

代码中涉及到自定义皮肤的id可参考 高德地图自定义地图模板

<template>
  <div id="allmap" class="allmap"></div>
</template>

<script>

export default {
  name: 'gaodemap',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      maplist: [
        {
          lng: 116.404,
          lat: 39.915,
          num: 10,
          active: false
        }, {
          lng: 116.604,
          lat: 40.515,
          num: 15,
          active: true
        },],
    }
  },
  watch: {},
  mounted () {
    this.getmapx()
  },
  methods: {
    getmapx () {
      var that = this
      that.map = new AMap.Map('allmap', {
        scrollWheel: true,
        viewMode: '2D',
        resizeEnable: true,
        zoom: 9,
        maxZoom: 30,
        minZoom: 0,
        mapStyle: '自定义皮肤',
        center: [116.404, 39.915],
      })
      var data_info = that.maplist
      for (var i = 0; i < data_info.length; i++) {
        console.log(1234)
        that.addMarker(data_info[i].lng, data_info[i].lat, data_info[i].num, data_info[i].active)
      }
    },
    addMarker (x, y, title, type) {
      var m = `<div class="overlay ${type ? '' : 'active'}"><div class="overx">
      <div class="popbg"><h3>西区广场东3方向</h3>
        <p>设备类型：<span>人行门禁</span></p>
        <p>设备状态：<span>正常</span></p>
        <p>信号强度：<span>-33</span></p></div></div></div>`
      var marker = new AMap.Marker({
        // icon: shexiangtou,
        position: [x, y],
        content: m,
        offset: new AMap.Pixel(-13, -30)
      })
      marker.setMap(this.map)
    },
  }
}
</script>

<style lang="scss">
.overlay {
  background: url("../../assets/icon_shexiangtou1.png");
  width: 32px;
  height: 26px;
  background-size: 100% 100%;
  position: relative;
  color: #fff;
  font-size: 0px;
}

.overlay.active {
  background: url("../../assets/icon_shexiangtou2.png");
  width: 32px;
  height: 26px;
  background-size: 100% 100%;
  position: relative;
  color: #fff;
  font-size: 0px;
}

.popbg {
  background: url("../../assets/mappopbg.png") no-repeat;
  background-size: 100% 100%;
  width: 316px;
  height: 224px;
  margin-left: 20px;
  margin-top: -20px;
  //display: none;

  h3 {
    font-size: 20px;
    font-family: PingFang;
    font-weight: 800;
    color: #00A4FF;
    margin-left: 55px;
    padding-top: 45px;
  }

  p {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #98BFFB;
    line-height: 20px;
    margin-left: 45px;

    span {
      color: #00A4FF;
    }
  }
}

.overlay:hover {
  .popbg {
    display: block;
  }
}
.allmap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>