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> <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代码:
- 初始化地图:
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 });
- 初始化搜索下拉框:
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'//查询行政级别为市
};