高德地图api使用Demo

 card.vue

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

<script>
 
  export default {
      components: {},
      data() {
          return {
              scrollH: 130,         
              heightData: '400px',
              zoom: 11,
              center: [116.244694, 39.517344],
              window: '',
              polygons: [],
              district: null,
              markers: [{
                  'cityName': '广州市',
                  'indexDay': '10',
                  'longitude': '113.25951799999996',
                  'latitude': '23.13171999000008'
              },
              {
                  'cityName': '韶关市',
                  'indexDay': '21',
                  'longitude': '113.59213880000004',
                  'latitude': '24.814891530000125'
              },
              {
                  'cityName': '深圳市',
                  'indexDay': '31',
                  'longitude': '114.0527770000001',
                  'latitude': '22.54555998000012'
              },
              {
                  'cityName': '珠海市',
                  'indexDay': '45',
                  'longitude': '113.57185000000004',
                  'latitude': '22.27383999'
              }]
          }
      },
      onLoad() {
      },
      mounted: function () {
          setTimeout(() => {
              this.drawBounds();
          }, 200);
      },
      methods: {
        addClickHandler(equiId,equiName,marker){
            console.log(marker)
            marker.on('click',function(){
                console.log(marker)
            })
      },
          drawBounds() {
              var _this = this
              // 创建地图实例
              var map = new AMap.Map('container', {
                  zoom: 7,
                  center: [113.57941, 23.10247],
                  resizeEnable: true
                  // mapStyle: 'amap://styles/自定义样式id'
              });
              map.clearMap();  // 清除地图覆盖物
              var marker = [];
              this.markers.forEach(function (marker, index) {
                  const backgroundColor = marker.indexDay < 20 ? '#FF8100' : (marker.indexDay < 30 ? '#8D3ECD' : (marker.indexDay < 40 ? '#2DCD72' : (marker.indexDay < 50 ? '#ff0000' : '#990000')))
                  const content = `<div style="display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border-radius: 2px;
                                    padding:2px 5px;
                                    font-size: 12px;
                                    color: #FFFFFF;
                                    box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.30);
                                    background-color: ${backgroundColor};">
                                    <div> ${marker.indexDay} </div>
                         </div>`
                  var _marker =new AMap.Marker({
                      map: map,
                      position: [marker.longitude, marker.latitude],
                      offset: new AMap.Pixel(-13, -30),
                      content: content
                  });
                  _this.addClickHandler('equiId', 'equiName', _marker)
              });
          }
      }
  }

</script>

<style>
  html,
  body,
  #container,
  uni-page-body,
  .mapContainer {
      height: 100%;
      width: 100%;
  }
</style>

main.js

import AMap from 'vue-amap'
Vue.use(AMap);
  // 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: '',
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Geolocation','Geolocation','AMap.DistrictSearch'],
  v: '1.4.4'
})