zoukankan      html  css  js  c++  java
  • AMap行政区查询服务

    AMap.DistrictSearch行政区查询服务插件,提供全国各省、市、县、区的中心点经纬度、行政区边界坐标组、下级行政区等信息。根据行政区边界坐标组可在地图上绘制行政区边界。(本文为原创,并在项目中验证成功。作者:张甫军)

    第一步,插件及样式的引用:

        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
        <script src="http://webapi.amap.com/maps?v=1.3&key=7defcebd378d7fcd05dbcb9298d20d2e&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.DistrictSearch"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
     <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>

    第二步,HTML代码:

      <div id="container"></div>
        <div id="tip">
            省:<select id='province' style="100px" onchange='search(this)'></select>
            市:<select id='city' style="100px" onchange='search(this)'></select>
            区:<select id='district' style="100px" onchange='search(this)'></select>
            街道:<select id='street' style="100px" onchange='setCenter(this)'></select>
            &nbsp;&nbsp;<input type="button" id="clearMap" onclick="clearMap()" value="清除" />
        </div>

    第三步,页面CSS样式:

        <style type="text/css">
            #tip {
                background-color: #fff;
                padding: 0 10px;
                border: 1px solid silver;
                box-shadow: 3px 4px 3px 0px silver;
                position: absolute;
                font-size: 12px;
                right: 10px;
                top: 5px;
                border-radius: 3px;
                line-height: 36px;
            }
        </style>

    第四步,JavaScript代码:

    1. 初始化地图:
              var editorTool, district, polygons = [], citycode, map = new AMap.Map("container", {
                  //resizeEnable: true,
                  //center: [116.403322, 39.900255],
                  //zoom: 13
                  resizeEnable: true,
                  //center: [116.30946, 39.937629],
                  zoom: 3
              });
    2. 初始化搜索下拉框:
              var citySelect = document.getElementById('city');
              var districtSelect = document.getElementById('district');
              var areaSelect = document.getElementById('street');
      
              var opts = {
                  subdistrict: 1,
                  level: 'city',
                  showbiz: false
              };
              district = new AMap.DistrictSearch(opts);
              district.search('中国', function (status, result) {
                  if (status == 'complete') {
                      getData(result.districtList[0]);
                  }
              });
              var mapCenter = null;
              var districtObj = {
                  Center: null,
                  Bounds: null
              };
              function getData(data) {
                  var bounds = data.boundaries;
                  mapCenter = data.center;
                  districtObj.Center = data.center;
                  districtObj.Bounds = bounds == null ? districtObj.Bounds : bounds;
                  console.log('default1');
                  if (bounds && '@((int)ElectronicFenceModel.ShapeType.District)' == '@((int)shapeType)') {
                      for (var i = 0, l = bounds.length; i < l; i++) {
                          var polygon = new AMap.Polygon({
                              map: map,
                              strokeWeight: 1,
                              strokeColor: '#CC66CC',
                              fillColor: '#CCF3FF',
                              fillOpacity: 0.5,
                              path: bounds[i]
                          });
                          polygons.push(polygon);
                      }
                      map.setFitView();
                  }
      
                  var subList = data.districtList;
                  var level = data.level;
      
                  if (level === 'province') {
                      nextLevel = 'city';
                      citySelect.innerHTML = '';
                      districtSelect.innerHTML = '';
                      areaSelect.innerHTML = '';
                  } else if (level === 'city') {
                      nextLevel = 'district';
                      districtSelect.innerHTML = '';
                      areaSelect.innerHTML = '';
                  } else if (level === 'district') {
                      nextLevel = 'street';
                      areaSelect.innerHTML = '';
                  }
                  if (subList) {
                      var contentSub = new Option('--请选择--');
                      for (var i = 0, l = subList.length; i < l; i++) {
                          var name = subList[i].name;
                          var levelSub = subList[i].level;
                          var cityCode = subList[i].citycode;
                          if (i == 0) {
                              document.querySelector('#' + levelSub).add(contentSub);
                          }
                          contentSub = new Option(name);
                          contentSub.setAttribute("value", levelSub);
                          contentSub.center = subList[i].center;
                          contentSub.adcode = subList[i].adcode;
                          document.querySelector('#' + levelSub).add(contentSub);
                      }
                  }
      
              }
              function search(obj) {
                  //清除地图上所有覆盖物
                  for (var i = 0, l = polygons.length; i < l; i++) {
                      polygons[i].setMap(null);
                  }
                  var option = obj[obj.options.selectedIndex];
                  var keyword = option.text; //关键字
                  var adcode = option.adcode;
                  district.setLevel(option.value); //行政区级别
                  district.setExtensions('all');
                  //行政区查询
                  //按照adcode进行查询可以保证数据返回的唯一性
                  district.search(adcode, function (status, result) {
                      if (status === 'complete') {
                          getData(result.districtList[0]);
                          setFence();
                      }
                  });
              }
              function setCenter(obj) {
                  mapCenter = obj[obj.options.selectedIndex].center;
                  map.setCenter(obj[obj.options.selectedIndex].center);
                  setFence();
              }
      
              function clearMap() {
                  map.clearMap();
              }

      以上代码,可以完成行政区查询,提供全国各省、市、县、区的中心点经纬度、行政区边界坐标组、下级行政区等信息。根据行政区边界坐标组可在地图上绘制行政区边界。注意:AMap.DistrictSearch行政区查询服务插件的初始化有2种方式,第一种:使用插件同步下发功能才能这样直接使用(本文采用此种方式,注意查看插件的引用);第二种:(查看下面的代码)

      mapObj.plugin('AMap.DistrictSearch', function () {
      					var opts = {
      					subdistrict: 0, //返回下一级行政区
      					extensions: 'all', //返回行政区边界坐标组等具体信息
      					level:'city' //查询行政级别为 市
      				};
      

        

    mapObj.plugin('AMap.DistrictSearch', function () {

                   var opts = {

                   subdistrict: 0, //返回下一级行政区

                   extensions: 'all', //返回行政区边界坐标组等具体信息

                   level:'city'//查询行政级别为

                };

  • 相关阅读:
    css相关
    文章管理列表
    高性能MySQL基础篇
    mysql
    node.js开发实战
    React Hooks
    client-*,scroll-*,offset-*的区别
    将create-react-app从javascript迁移到typescript
    为Github项目添加Travis持续集成服务
    cookie储存
  • 原文地址:https://www.cnblogs.com/fjzhang/p/6252802.html
Copyright © 2011-2022 走看看