Vue引入原生JS 高德地图实现Maker点击创建带下标聚合效果

环境：vue 2.9.6

本来看着vue集成了相关的高德地图，本以为就可以很方便的调用，结果发现功能很不齐全，本次涉及到的基本maker操作都没有，无奈只好引入原生js，遇到了很多坑记录下：

代码现行：

<script src="http://webapi.amap.com/maps?v=1.3&key=xxx"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>

二话不说先在index.html中直接引入高德相关

写成组件化（）：

<!--
  描述：拖放地图组件，默认尺寸是 500 * 300

  接收属性参数：
    lat: 纬度
    lng: 经度

  自定义事件：
    drag: 拖放完成事件

  示例：
    <mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
-->
<template>
  <div class="m-map">
    <div id="js-container" class="map" >正在加载数据 ...</div>
    <img style=" position:relative;top: -55px;left: 5px;width: 45px;" src="../../assets/images/jw_logo.png" >
  </div>
</template>

<script>
import { MapKey, BuildingPng} from '../config/config'
export default {
  props: ['lat', 'lng'],
  data () {
    return {
      cluster:null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      marker:null,
      map:null,
      map_lng:null,
      map_lat:null,
      geocoder:null,
      strLen:0,
      buildingList:[],
      switchBoo:true,
      switchWatch:true,
      markers:[]
    }
  },
  mounted(){
  },
  watch: {
    markers(){
      if (this.switchWatch){
        this.addCluster(1);
        this.switchWatch = false;
      }
    }
  },
  methods: {
    initMapMaker(){
      this.buildingList = [];
      let that = this;
      $.ajax({
        type: "get",
        url: 获取请求所有需要创建的makers,
        dataType: "json",
        success: function(data) {
          if (data.code === 200){
            that.buildingList = data.buildings;
            that.buildingList.forEach((obj)=>{
              that.addMarker(obj.longitude, obj.latitude, obj.name, obj.email, 1, obj.uniqueKey);
            })
          }
        },
      });
    },
    clear(){
      this.placeSearch.clear();
    },
    async initInfo(){
      this.initMap();
    },
    //获取并展示当前城市信息
    logMapinfo(){
        this.map.getCity( function(info){
           return info.city;
        });
    },
    //计算字符串长度
    strLength(str){
      let realLength = 0, len = str.length, charCode = -1;
      for (let i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128)
          realLength += 1;
        else
          realLength += 2;
      }
      return realLength;
    },
    //设置视角
    setView(lng, lat){
      this.map.setZoomAndCenter(16,[lng, lat]);
    },
    // 创建标记
    addMarker(lng, lat, mapName, email, type, uniqueKey) {

      if (email !== '' && email !== null ){
        let shifting = 0;
        let span = '<span  class="map-email" style="margin-top: 6px">'+email+'</span>';
        //若名称大于邮箱展示，则重新设置偏移
        if (this.strLength(mapName) > this.strLength(email)){
          shifting =-5 * (this.strLength(mapName) - 16)  + 5;
        }else {
          if (this.strLength(email) < 16){
            shifting = -this.strLength(email) * 10 + 140;
          }
        }
        if (lng !== null && lat !== null){
          if (type === 1){
            this.marker = new AMap.Marker({
              icon: BuildingPng,
              position: [lng,lat],
              offset: new AMap.Pixel(-13, -30),
              label:{
                content: '<div class="map-name"><span>'+mapName+'</span>'+span+'</div>',
                offset: new AMap.Pixel(-55 + shifting, 55)
              },
              extData:uniqueKey
            });
          }else {
            this.marker = new AMap.Marker({
              icon: BuildingPng,
              position: [lng,lat],
              offset: new AMap.Pixel(-13, -30),
              extData:uniqueKey
            });
          }
          this.markers.push(this.marker);
          // this.marker.setMap(this.map);
          let that = this;
          new AMap.event.addListener(this.marker, 'click', function(e) {
            //得到的数据
            that.$store.commit('setMapShow_uniqueKey', JSON.parse(JSON.stringify(e.target.getExtData())));
            const { href } = that.$router.resolve({ name:'MapShow'});
            window.open(href, '_blank', )
          });
        }
      }
    },
    // 清除 marker
    clearMarker() {
        if (this.marker) {
            this.marker.setMap(null);
            this.marker = null;
        }
    },
    //鼠标单击事件获取坐标
    showInfoClick(e){
        this.map_lng = e.lnglat.getLng();
        this.map_lat = e.lnglat.getLat();
    },
    // 搜索
    handleSearch () {
      this.setView(104.071078, 30.545154);
    },
    //设置建筑
    setBuildingList(val){
      if (val === ''){
        this.map.setZoomAndCenter(16,[104.065861, 30.657401]);
      }else {
        this.buildingList = val;
      }
    },
    //聚合makers
    addCluster(tag) {
      if (this.cluster) {
        this.cluster.setMap(null);
      } else if (tag === 1) {//自定义图标
        var sts = [{
          url: require('../images/TogetherPng.png'),
          size: new AMap.Size(43, 50),
          offset: new AMap.Pixel(-13, -30),
          imageOffset:new AMap.Pixel(0, 0),
          textColor:'#ffffff',
          textSize: 20
        },
          {
            url: require('../images/TogetherPng.png'),
            size: new AMap.Size(43, 50),
            offset: new AMap.Pixel(-13, -30),
            imageOffset:new AMap.Pixel(0, 0),
            textColor:'#ffffff',
            textSize: 20
          },
          {
            url: require('../images/TogetherPng.png'),
            size: new AMap.Size(43, 50),
            offset: new AMap.Pixel(-13, -30),
            imageOffset:new AMap.Pixel(0, 0),
            textColor:'#ffffff',
            textSize: 20
          },
          {
            url: require('../images/TogetherPng.png'),
            size: new AMap.Size(43, 50),
            offset: new AMap.Pixel(-13, -30),
            imageOffset:new AMap.Pixel(0, 0),
            textColor:'#ffffff',
            textSize: 20
          }];
        let Amap = this.map;
        let markers = this.markers;
        let cluster = this.cluster;
        Amap.plugin(["AMap.MarkerClusterer"],function() {
          cluster = new AMap.MarkerClusterer(Amap, markers, {
            styles: sts,
            gridSize: 80
          });
        });
      } else {//默认样式
        let Amap = this.map;
        let markers = this.markers;
        Amap.plugin(["AMap.MarkerClusterer"],function() {
          cluster = new AMap.MarkerClusterer(Amap, markers, {gridSize: 80});
        });
      }
    },
    mapSetZoom(){

    },
    //缩放比例回调
    mapZoomend(){
      let zoom = this.map.getZoom();
      console.debug(zoom + "缩放比例")
    },
    clearMap(){
      this.map.clearMap();
    },
    // 实例化地图
    async initMap () {
        // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        this.AMapUI = window.AMapUI;
        let AMapUI =window.AMapUI;
        let AMap = this.AMap = window.AMap;
        if (typeof (AMapUI) == "undefined"){
        }
        AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
          let mapConfig = {
            zoom: 14,//初始化地图层级
            // cityName: MapCityName,
            resizeEnable: true //是否监控地图容器尺寸变化
          };
          if (this.lat && this.lng) {
            mapConfig.center = [this.lng, this.lat]
          }
          let marker, map = new AMap.Map('js-container', mapConfig);
          this.map = map;
          this.marker = marker;
          this.initMapMaker();
          map.on('zoomend', this.mapZoomend);
          map.on('click', this.showInfoClick);
            let city = this.logMapinfo();
          // 启用工具条
          AMap.plugin(['AMap.ToolBar'], function () {
            map.addControl(new AMap.ToolBar({
              position: 'RB'
            }))
          });
          // 创建地图拖拽
          let positionPicker = new PositionPicker({
            mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map: map // 依赖地图对象
          });
          // 拖拽完成发送自定义 drag 事件
          positionPicker.on('success', () => {
            // 过滤掉初始化地图后的第一次默认拖放
            if (!this.dragStatus) {
              this.dragStatus = true
            }
          });
          // 启动拖放
          positionPicker.start();
          //绑定地图移动事件
          map.setCity(city);
        });
      }
  },
  async created () {
    this.initInfo();
  },
}
</script>
<style>
  /**
    局部覆盖原生样式
   */
  .my_input .el-input__inner{
    background:rgba(28,29,29,1);
    border:1px solid rgba(0,0,0,1);
    border-radius:20px;
  }
</style>
<style lang="css">
  .amap-logo {
    display: none;
  }
  .amap-copyright {
    opacity:0;
  }
.my_input{position: marker;width:400px;height:40px;}
.m-map{ width: 100%; height: 100%; position: relative; }
.m-map .map{ width: 100%; height: 100%; }
.m-map .search_gaode{ position: absolute; top: 30px; left: 10px; width: 285px; z-index: 1; }
.m-map .result{ max-height: 300px; overflow: auto; margin-top: 10px; }
.m-map .amap-marker-label{
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:Source Han Sans CN;
    font-weight:400;
    width:auto;
    padding: 7px 15px 7px 15px;
    height:41px!important;
    background:rgba(19,19,24,1);
    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    border-radius:15px;
}
.m-map .amap-ui-misc-positionpicker{
  display: none;
}
.m-map .map-name{
  font-size:16px;
  color: white;
  display:flex;
  flex-direction:column;
  align-items:center
}
.m-map .map-email{
  font-size:12px;
  color: #A0A0A0;
}
</style>

引入的config.js

// 高德地图 key
export const MapKey = 'xxx';
//makers图标
export const BuildingPng = 'data:image/png;base64,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';

遇到的几大坑：

①在ajax返回值中this的指向会改变，只能在外部先定义才能指向到vue

②高德地图在嵌入页面的时候会出现加载地图不完整 让初始化方法async 方式

③maker的下标显示label 这里有个很麻烦的地方如果你的标签显示信息长度不相同动态的，它这里没有自动居中设置只能设置偏移量，我这里只是简单的数学计算让它居中，没有深入研究

④maker的监听事件也和①一样内部需要转this指向

label:{
                content: '<div class="map-name"><span>'+mapName+'</span>'+span+'</div>',
                offset: new AMap.Pixel(-55 + shifting, 55)
              },

 let that = this;
          new AMap.event.addListener(this.marker, 'click', function(e) {
            //得到的数据
            that.$store.commit('setMapShow_uniqueKey', JSON.parse(JSON.stringify(e.target.getExtData())));
            const { href } = that.$router.resolve({ name:'MapShow'});
            window.open(href, '_blank', )
          });