vue-amap添加某个省市县区的边界线，添加某个省市县区的行政区划

news/2024/7/10 2:52:55 标签: 街景地图, vue

效果图 在这里插入图片描述
基础步骤我这里就不过多介绍了，大家可以去看文档：vue-amap文档或者vue-amap官网
实现步骤思路： 百度上都是一个省整的，没有往下分，或者是一个市，县整的，都没有往下分级。既然没有，那我们就可以用各个市循环拼接成一个省，用各个县拼接成一个市，以此类推，用下一级的行政区划拼接成上一级的行政区划，这样就相当于是分级显示的了。
话不多说，上代码：

HTML

<el-amap>
  <div v-for="(item,indexx) in polygonss" :key="indexx">
      <el-amap-polygon
        strokeColor="red"
        strokeOpacity="1"
        fillColor="#fff"
        fillOpacity="0.5"
        v-for="(polygon, index) in item"
        :key="index"
        strokeWeight="2"
        :path="polygon.Ce.path"
      ></el-amap-polygon>
    </div>
</el-amap>

JS

data() {
    return {
     polygonss:[[],[],[],[],[],[],[],[],[],[],[],[],[]],//13个市的数组
      citys:['徐州市','常州市','南通市','连云港市','盐城市','扬州市','镇江市','泰州市','宿迁市','苏州市','南京市','无锡市','淮安市'],//13个市的名称
      
    }
},
  methods: {
    drawBounds() {
      var that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //循环各个市的行政区查询 *********关键性代码
      for(let i=0;i<this.polygonss.length;i++){
        that.district.search(this.citys[i], function (status, result) {
          that.polygonss[i] = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              var polygon = new AMap.Polygon({
                path: bounds[i],
              });
              that.polygonss[i].push(polygon);
            }
          }
          AMap.Polygon.bind(that.polygonss[i]);
        });
      }
    },
  },
  mounted() {
    setTimeout(() => {//延迟加载
      this.drawBounds();
    }, 200);
  },