高德地图绘制省市边界，根据指标各市显示不同状态

高德api中提供了绘制边界方法，引用简单，只需传入省市名称即可，以下以江苏省示例，为演示效果数据为自定义,效果如下。

① index.html文件中引入高德地图及关键方法

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值&plugin=AMap.Driving&plugin=AMap.DistrictSearch"></script>

② 组件中

<template>
  <div class="bayonettrack">
    <div id="map"></div>
  </div>
</template>

<script>
var map = "";
var marker = "";
export default {
  data() {
    return {
      map_opt: [
        {
          city: "南京",
          color: "red",
        },
        {
          city: "常州",
          color: "green",
        },
        {
          city: "镇江",
          color: "yellow",
        },
        {
          city: "扬州",
          color: "green",
        },
        {
          city: "无锡",
          color: "blue",
        },
        {
          city: "南通",
          color: "yellow",
        },
        {
          city: "苏州",
          color: "green",
        },
        {
          city: "盐城",
          color: "yellow",
        },
        {
          city: "淮安",
          color: "red",
        },
        {
          city: "宿迁",
          color: "blue",
        },
        {
          city: "连云港",
          color: "red",
        },
        {
          city: "徐州",
          color: "green",
        },
        {
          city: "泰州",
          color: "blue",
        },
      ],
      marker_opt: [
        {
          name: "南京市",
          lal: [118.804617,31.962881],
          level: "AAAAA",
          num: "1212",
        },{
          name: "镇江市",
          lal: [119.484396,32.073498],
          level: "AAAA",
          num: "2323",
        },{
          name: "徐州市",
          lal: [117.714785,34.277433],
          level: "AAAA",
          num: "2323",
        },{
          name: "连云港市",
          lal: [119.144564,34.546182],
          level: "AAAA",
          num: "2323",
        },{
          name: "宿迁市",
          lal: [118.466066,33.80879],
          level: "AAAA",
          num: "2323",
        },{
          name: "淮安市",
          lal: [119.182924,33.587137],
          level: "AAAA",
          num: "2323",
        },{
          name: "扬州市",
          lal: [119.51526,32.677098],
          level: "AAAA",
          num: "2323",
        },{
          name: "泰州市",
          lal: [120.114025,32.332835],
          level: "AAAA",
          num: "2323",
        },{
          name: "南通市",
          lal: [121.115498,32.230665],
          level: "AAAA",
          num: "2323",
        },{
          name: "苏州市",
          lal: [120.703034,31.302861],
          level: "AAAA",
          num: "2323",
        },{
          name: "无锡市",
          lal: [120.297226,31.626742],
          level: "AAAA",
          num: "2323",
        },{
          name: "常州市",
          lal: [119.894852,31.747689],
          level: "AAAA",
          num: "2323",
        },{
          name: "盐城市",
          lal: [120.157414,33.670114],
          level: "AAAA",
          num: "2323",
        },
      ],
    };
  },
  mounted() {
    this.newmap();
    this.hidden_map();
  },
  methods: {
    // 默认地图
    newmap() {
      map = new AMap.Map("map", {
        zoom: 8,
        center: [119.307549, 32.989607],
        mapStyle: "amap://styles/darkblue",
      });
      // 获取边界坐标点
      AMap.plugin("AMap.DistrictSearch", () => {
        var districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，共有5种级别
          level: "province",
          //  是否显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 0,
          // 返回行政区边界坐标点
          extensions: "all",
        });

        for (let i = 0; i < this.map_opt.length; i++) {
          // 搜索所有省/直辖市信息
          districtSearch.search(this.map_opt[i].city, (status, result) => {
            // 查询成功时，result即为对应的行政区信息
            this.handlePolygon(result, this.map_opt[i].color);
          });
        }
        this.handleMarker()
      });
    },
    // 根据坐标点画边界
    handlePolygon(result, color) {
      let bounds = result.districtList[0].boundaries;
      if (bounds) {
        for (let i = 0, l = bounds.length; i < l; i++) {
          //生成行政区划polygon
          let polygon = new AMap.Polygon({
            map: map, // 指定地图对象
            strokeWeight: 1, // 轮廓线宽度
            path: bounds[i], //轮廓线的节点坐标数组
            fillOpacity: 0.4, //透明度
            fillColor: color, //填充颜色
            strokeColor: "#256edc", //线条颜色
          });
          // polygon.on('click', (e) => {
          // 点击绘制的区域时执行其他交互
          //
          // })
        }
        // 地图自适应
        // map.setFitView();
      }
    },
    // 隐藏周边多余地图
    hidden_map() {
      new AMap.DistrictSearch({
        extensions: "all",
        subdistrict: 0,
      }).search("江苏省", function (status, result) {
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ];
        var holes = result.districtList[0].boundaries;

        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          //线条颜色，使用16进制颜色代码赋值。默认值为#006600
          strokeColor: "rgb(20,164,173)",
          strokeWeight: 1,
          //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
          strokeOpacity: 0,
          //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
          fillColor: "rgba(0,0,0)",
          //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
          fillOpacity: 1,
          //轮廓线样式，实线:solid，虚线:dashed
          strokeStyle: "solid",
          /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
          ie9+浏览器有效 取值： 
          实线：[0,0,0] 
          虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
          点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
          线和10个像素的空白 （如此反复）组成的虚线*/
          strokeDasharray: [10, 2, 10],
        });
        polygon.setPath(pathArray);
        map.add(polygon);
      });
    },
    // marker点指标
    handleMarker() {
      for (let i = 0; i < this.marker_opt.length; i++) {
        marker = new AMap.Marker({
          position: this.marker_opt[i].lal,
          map: map,
          offset: new AMap.Pixel(-30, -20), //相对于基点的偏移位置
          content: `<div class='info'>${this.marker_opt[i].name}<br/>${this.marker_opt[i].level}<br/>${this.marker_opt[i].num}</div>`,
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.bayonettrack {
  width: 100%;
  height: 100%;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>

③ 设置marker点弹窗样式

.info{
  width: 60px;
  height: 50px;
  background: #fff;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
}