博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AMap行政区查询服务
阅读量:7103 次
发布时间:2019-06-28

本文共 4960 字,大约阅读时间需要 16 分钟。

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

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

第二步,HTML代码:

省:
市:
区:
街道:
  

第三步,页面CSS样式:

第四步,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'//查询行政级别为

            };

转载于:https://www.cnblogs.com/fjzhang/p/6252802.html

你可能感兴趣的文章
Ex2010学习(八),简化用户OWA访问
查看>>
Java环境变量设置
查看>>
编译Hadoop的Eclipse插件(hadoop-eclipse-plugin.jar)
查看>>
Jenkins利用Role-based Authorization Strategy插件管理项目权限
查看>>
转载 Android自定义控件
查看>>
JavaScript 的性能优化:加载和执行
查看>>
Oracle数据库的备份与还原【转】
查看>>
openerp7微信支付开发
查看>>
部署Azure Pack -安装Tenant Public API
查看>>
常用开源站点整理
查看>>
Linux服务器性能评估与优化
查看>>
从一个页面请求开始(三)
查看>>
从一个页面请求开始(一)
查看>>
关于nginx限制IP或IP段
查看>>
Linux新手之路 - ls mkdir rmdir rm cp mv 命令
查看>>
Samba服务器笔记
查看>>
单例模式
查看>>
linux网络相关配置
查看>>
他们如何利用微信赚钱
查看>>
安装配置cacti
查看>>