vue大屏项目开发,客户觉得地图上的文字标注太多了，要求地图上只显示省市等主要城市的标注。
研究了一下地图，并没有找到可以过滤的名称的配置，只能使用LabelMarker进行自定义配置了。
配置前，要先隐藏地图自带的标注
vue 高德地图显示要素，通过Map.setFeatures可以配置隐藏默认标注。

参考官方实例二次修改实现自己想要的效果
官方文档

城市数据

import {cityData} from '@/utils/cities'

    initMap() {
      var that = this;
      let backPicUrl = '';
      backPicUrl = (mapbg);
      that.markerList = []
      that.map = new AMap.Map('gd_map_d', {
        zoom: 13,
        mapStyle: 'amap://styles/darkblue',
        center: [108.095907, 23.919379],
        features: ['bg', 'road', 'building'],
        // map的样式需要到高德后台去自定义
      });
      setTimeout(() => {
        that.map.setZoomAndCenter(13, [that.center.longitude, that.center.latitude])
      }, 1000)
      this.potList.forEach(item => {
        // 根据type判断icon类型
        // 1 隧道 2服务区 3收费站 4 管理中心 5 互通
        var staticLine = [];
        item.spotList.forEach((type) => {
          if (type.spotType != 0 && item.proId == this.proId) {

            var marker = new AMap.Marker({
              position: [type.longitude, type.latitude],
              map: that.map,
              offset: new AMap.Pixel(-34, -93),
              extData: type,
              extData2: item,
              icon: new AMap.Icon({
                image: that.filterData(type.spotType),
                imageSize: new AMap.Size(68, 93),
                size: new AMap.Size(68, 93)
              })
            });
            that.map.add(marker);
            that.markerList.push(marker)
            marker.on('click', that.markerClick)
          }
          staticLine.push([type.longitude, type.latitude])
        });
        if (item.proId == this.proId) {
          var polyline = new AMap.Polyline({
            map: that.map,
            path: staticLine,
            data: item,
            strokeColor: "#62D97A", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 10, //线宽
            strokeStyle: "solid" //线样式
          });
          polyline.on('click', that.polylineClick)
        }
        // 绘制线路
      })
      that.map.setFitView();
      var markers = [];
      var layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1,
        collision: false,
        allowCollision: false,
      });
      layer.add(markers);
      // 图层添加到地图
      that.map.add(layer);
      var textStyle = {
        fontSize: 12,
        fontWeight: 'normal',
        fillColor: '#00627a',
      };
      cityData.forEach((type) => {
        var marker = new AMap.LabelMarker({
          name: type.name,
          position: [type.x, type.y],
          text: {
            content: type.name,
            direction: 'center',
            style: textStyle,
          }
        });
        markers.push(marker);
      });
      layer.add(markers);
    },