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="width:100px" onchange='search(this)'></select>
市:<select id='city' style="width:100px" onchange='search(this)'></select>
区:<select id='district' style="width:100px" onchange='search(this)'></select>
街道:<select id='street' style="width: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'//查询行政级别为市

};

AMap行政区查询服务的更多相关文章

  1. C#调用天气查询服务

    先引入天气查询服务 1.有点引用导入服务引用 //实例化            web引用名.WeatherWebService cn = new web引用名.WeatherWebService() ...

  2. .NET应用架构设计—面向查询服务的参数化查询设计(分解业务点,单独配置各自的数据查询契约)

    阅读目录: 1.背景介绍 2.对业务功能点进行逻辑划分(如:A.B.C分别三个业务点) 2.1.配置映射关系,对业务点配置查询契约(构造VS插件方便生成查询契约) 2.2.将配置好的映射策略文件放在调 ...

  3. 用.net访问电子枢纽信用中心的数据查询服务

    概要说明 电子枢纽全称国家交通运输物流公共信息平台,主要提供物流及生产企业进行物流相关数据交换的标准和API,详细介绍可参考其官网www.logink.org,本文假定阅读者对该平台已有了解,并已成功 ...

  4. MVC项目实践,在三层架构下实现SportsStore-09,ASP.NET MVC调用ASP.NET Web API的查询服务

    ASP.NET Web API和WCF都体现了REST软件架构风格.在REST中,把一切数据视为资源,所以也是一种面向资源的架构风格.所有的资源都可以通过URI来唯一标识,通过对资源的HTTP操作(G ...

  5. AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-(个人拙笔)

    AspNet.WebAPI.OData.ODataPQ 这是针对 Asp.net WebAPI OData 协议下,查询分页.或者是说 本人在使用Asp.Net webAPI 做服务接口时写的一个分页 ...

  6. 基于FeignClient提供简单的用户查询服务

    前言: 由于系统升级,之前的员工数据库(mongo库)被弃用,改为用python维护的mysql库,其他系统访问通过http请求,表结构对外不可见,其他系统之前对员工mongo库的依赖要解除.每套系统 ...

  7. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  8. AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-(个人拙笔)(转)

    出处:http://www.bubuko.com/infodetail-827612.html AspNet.WebAPI.OData.ODataPQ 这是针对 Asp.net WebAPI ODat ...

  9. GraphQL介绍&使用nestjs构建GraphQL查询服务

    GraphQL介绍&使用nestjs构建GraphQL查询服务(文章底部附demo地址) GraphQL一种用为你 API 而生的查询语言.出自于Facebook,GraphQL非常易懂,直接 ...

随机推荐

  1. Unity 摄像机组件

    今天看一下unity3d里面的摄像机是怎么调用和操作的. 打开unity3d新建一个工程.在我们打开工程的时候unity3d会主动添加一个Main Camera,在Hierartchy视图中.点击Ma ...

  2. linux进程命令

    1. ps命令 命令 命令名称: 命令名称: ps 功能: 功能: 查询正在执行的进程 语法: 可选参数] 语法: ps [可选参数] 描述: 命令提供 命令提供Linux系统中正在发生的事情的   ...

  3. JSTL String时间转成 date

    两个标签配合使用 <fmt:parseDate value="${integralRecord.startDate}" var="date1"/> ...

  4. 《深入浅出Node.js》第6章 理解 Buffer

    @by Ruth92(转载请注明出处) 第6章 理解 Buffer ✁ 为什么需要 Buffer? 在 Node 中,应用需要处理网络协议.操作数据库.处理图片.接收上传文件等,在网络流和文件的操作中 ...

  5. DOM example

    一:DOM简介: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中, ...

  6. android插件中或者library中获取asstes文件

    在插件中或者library的项目中把文件放在asstes,不能用context.getResources().getAssets().open(fileName)读取到流,会报FileNotFound ...

  7. LintCode Find Minimum In Rotated Sorted Array

    1. 画图, 直观. 2. 讨论数组为空或者个数为零. 3. 讨论首尾, 若为翻转过的则进行查找直到最后两个数进行比较, 取小者. public class Solution { /** * @par ...

  8. java考核完的心得

    2015年8月13日     星期四      晴 今天上午我们考核了java,就是用Java语言写一个小型的管理系统.考核前的我信心满满,因为我本身是测试专业的,觉得在开发这方面对自己不用要求的那么 ...

  9. GithubPage 的简单使用

    这是我第一次写博客,主要是记录自己前端学习的经历.这次写一下GitHubpage 的简单使用.我用这里并没有想挂博客,主要是挂自己的一些小作品应用到简历中. 第一步: 首先先注册Github账号,创建 ...

  10. 转换成的jar文件接收后台的信息乱码cmd解决办法

    运行——cmd——    java -jar -Dfile.encoding=utf-8 xxx.jar