高德地图官方API
图例
总结要点
申请高德地图的key 用于后边web调用 高德地图key申请引用 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.DistrictSearch"></script>初始化地图 let map = new AMap.Map('container', { resizeEnable: true, center: [116.30946, 39.937629], 强健的大神: 3//缩放级别 }); 引用同步插件 //行政区划查询 var opts = { subdistrict: 1, //返回下一级行政区 showbiz:false //最后一级返回街道信息 }; let district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用 获取当前需要绘制的区域数据 //说明 district 参数对象是由 第四步引用插件是创建district.setLevel("province"); //行政区级别district.setExtensions('all');//行政区查询//按照adcode进行查询可以保证数据返回的唯一性let cityCode = "610400";//注意这个参数必须是字符串,要不然显示不出来的district.search(cityCode, function (status, result) {if (status === 'complete') {// 绘制区域getData(result.districtList[0]);}}); 绘制所需要的区域位置 [很重要] /** * 参数说明 * data- 数据要由官方同步获取,以免后边绘制地图参数发生变化,实例中由步奏 5中获取到的result参数中传来 */ let polygons = [];//绘制区域面积图的数组function getData(data) {var bounds = data.boundaries;if (bounds) {for (var i = 0, l = bounds.length; i < l; i++) {var polygon = new AMap.Polygon({map: map,strokeWeight: 1,strokeColor: '#0091ea',fillColor: '#80d8ff',fillOpacity: 0.2,path: bounds[i]});polygons.push(polygon);}map.setFitView();//地图自适应}} 擦除已经绘制的区域面积图 /** * 步奏6中的polygons[] 就是我们绘制的区域数据,去过不需要的话,可以用for循环设置为空,就清除可 */for (var i = 0, l = polygons.length; i < l; i++) {polygons[i].setMap(null);}