关于高德地图绘制区域边界图

最新推荐文章于 2024-06-10 21:01:18 发布

前端小菜鸡～

最新推荐文章于 2024-06-10 21:01:18 发布

阅读量449

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/m0_75013578/article/details/138226658

版权

本文介绍了如何在Web应用中使用高德地图API，首先配置秘钥，然后创建2D地图并设置样式。接着，通过AMap.DistrictSearch插件获取城市行政区划信息，并在地图上绘制多边形。最后展示如何进行省市区、地级市、区县和街道级别的定位。

摘要由CSDN通过智能技术生成

第一步，也是最重要的一步！！！！！！！！！！！！！！！！

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "高德秘钥",
    }
  </script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=高德Key"></script>
一定要记得在index.html中配置秘钥，不然你将会搜索的时候一直报no_data。

同时我的应用中服务平台要选Web端(JS API)

第二步在地图创建

//创建地图
    createdMap() {
      let self = this;
      this.map = new AMap.Map("FootC", {
        viewMode: "2D", //2D模式
        zoom: 13, //地图层级
        center: [121, 30.54], //中心点位
        mapStyle: "amap://styles/normal", //地图样式
      });
      this.drawBounds();
    },

第三步创建后调用该函数！！！！

drawBounds() {
      let that = this;
      AMap.plugin("AMap.DistrictSearch", function () {
        var districtSearch = new AMap.DistrictSearch({
          level: "city", //关键字对应的行政区级别，country 表示国家
          subdistrict: 3, //显示下级行政区级数，1表示返回下一级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
        });
        //搜索所有省、直辖市信息
        districtSearch.search("眉山市", function (status, result) {
          console.log(status, result);
          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
          //查询成功时，result 即为对应的行政区信息
          var bounds = result.districtList[1].boundaries; //获取边界信息
          if (bounds) {
            for (var i = 0; i < bounds.length; i++) {
              //生成行政区划 polygon
              var polygon = new AMap.Polygon({
                map: that.map, //显示该覆盖物的地图对象
                strokeWeight: 1, //轮廓线宽度
                path: bounds[i], //多边形轮廓线的节点坐标数组
                fillOpacity: 0.7, //多边形填充透明度
                fillColor: "#CCF3FF", //多边形填充颜色
                strokeColor: "#CC66CC", //线条颜色
              });
            }
            that.map.setFitView(); //将覆盖物调整到合适视野
          }
        });
      });
    },

省市区（province）、地级市（city）、区县（district）、街道（street）