效果图

1590034279(1).jpg

一、获取高德地图的key

获取地址：高德开放平台https://lbs.amap.com/

二、npm安装vue-amap

npm install vue-amap --save

三、在项目main.js引入vue-amap

import AMap from 'vue-amap';
Vue.use(AMap);

  // 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: '你的key',
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','MarkerClusterer']
});

四、vue中使用（直接复制粘贴）

<template>
    <div id="apps">

      <el-amap
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        class="amap-demo"
        :events="events"
        >
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :content="marker.content" :events="marker.events"></el-amap-marker>
      </el-amap>
    </div>
  </template>


  <script>
    import http from '../../../service/Solvemanage.js';
    const getMap = new http();
   export default{
      data() {
        let self = this;
        return {
          zoom: 5,
          center: [116.407162, 39.887269],
          markers: [],
          markerRefs: [],
          events: {
            init(o) {
              setTimeout(() => {
                console.log(self.markerRefs);
                let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
                  gridSize: 80,
                  renderCluserMarker: self._renderCluserMarker
                });
                console.log(cluster);
              }, 1000);
            }
          }
        };
      },

      created() {
       getMap.osachomegetMapInfo().then(res =>{
         let self = this;
         let markers = [];
         let index = 0;
         let basePosition = [116.407162, 39.887269];
         res.data.data.stationList.map((item,index) =>{
           markers.push({
             position: [item.lng,item.lat],
             content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
             events: {
               init(o) {
                 self.markerRefs.push(o);
               }
             }
           });
         })
         this.markers = markers;

       })

      },
      methods: {
        _renderCluserMarker(context) {
          const count = this.markers.length;
          let factor = Math.pow(context.count/count, 1/18)
          let div = document.createElement('div');
          let Hue = 180 - factor* 180;
          let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
          let fontColor = 'hsla('+Hue+',100%,20%,1)';
          let borderColor = 'hsla('+Hue+',100%,40%,1)';
          let shadowColor = 'hsla('+Hue+',100%,50%,1)';
          div.style.backgroundColor = bgColor
          let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
          div.style.width = div.style.height = size+'px';
          div.style.border = 'solid 1px '+ borderColor;
          div.style.borderRadius = size/2 + 'px';
          div.style.boxShadow = '0 0 1px '+ shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size+'px';
          div.style.color = fontColor;
          div.style.fontSize = '14px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
          context.marker.setContent(div)
        }
      }
    };
</script>
  <style>
    #apps{
      height: 800px;
      width: 100%;
    }
  </style>

vue-amap APl地址

https://elemefe.github.io/vue-amap/#/zh-cn/examples/coverings/marker-cluster

高德 API地址

https://lbs.amap.com/api/javascript-api/example/marker/custom-icon/