嗨玩手游网

高德地图获取行政区域以及中心点

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>行政区边界查询</title> <link rel="stylesheet" href="https://a.amap/jsapi_demos/static/demo-center/css/demo-center.css"/> <style> html,body,#container{ margin:0; height:100%; } put-item-text{ width:7rem; } </style></head><body><div id="container"></div><div class="input-card" style="visibility: hidden"> <label style='color:grey'>行政区边界查询</label> <div class="input-item"> <div class="input-item-prepend"> <span class="input-item-text" >行政级别</span> </div> <select id="level"> <option value="district">district</option> <option value="city">city</option> <option value="province">province</option> </select> </div> <div class="input-item"> <div class="input-item-prepend"> <span class="input-item-text" >名称/adcode</span> </div> <input id='district' type="text" value='朝阳区'> </div> <input id="draw" type="button" class="btn" value="查询" /></div><script type="text/javascript" src="/d/file/gt/2023-09/b5om4fqaef3 type="text/javascript" src="turfjs/turf.min.js"></script><script type="text/javascript"> //初始化地图对象,加载地图 var map = new AMap.Map("container", { resizeEnable: true, center: [113.259952,23.136613],//地图中心点 zoom: 9.5, //地图显示的缩放级别 mapStyle: 'amap://styles/35bcbfacdd429dfe3d4fc5848ffa392e', showBuildingBlock: false }); var district = null; var polygons=[]; /** * type,显示级别district 、 province、city * areaname ,行政区名字 * labePosition,文字位置 * */ function drawBounds(type,areaname,labePosition) { //加载行政区划插件 if(!district){ //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 市 }; district = new AMap.DistrictSearch(opts); } //行政区查询 district.setLevel(type); district.search(areaname, function(status, result) { console.log("---document.getElementById('level').value:",document.getElementById('level').value); var bounds = result.districtList[0].boundaries; var bounds_center = result.districtList[0]; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 3, path: bounds[i], fillOpacity: 0, fillColor: '#80d8ff', strokeColor: '#80d8ff' }); polygons.push(polygon); } } map.add(polygon); //计算中心点 var centroid =bounds_center; console.log("centroid,",centroid); let polygonsCenter = bounds_center; if(labePosition!=null&&labePosition!=''){ //如果手动设置了中心点 polygonsCenter = labePosition; } // 创建纯文本标记 var text = new AMap.Text({ text:areaname, anchor:'center', // 设置文本标记锚点 draggable:true, cursor:'pointer', angle:0, style:{ 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', 'border-radius': '.25rem', 'background-color': 'rgba(255,255,255,0)', 'width': '15rem', 'border-width': 0, 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, 0)', 'text-align': 'center', 'font-size': '12px', 'color': 'rgba(255,255,255,1)' }, position: polygonsCenter }); text.setMap(map); }); } /** * 画行政区 */ function initArea(){ map.remove(polygons)//清除上次结果 polygons = []; drawBounds('district','越秀区',[113.28637,23.127901]);//没有手动设置中心点,自动设置 drawBounds('district','天河区',[113.36117,23.155445]);//没有手动设置中心点,自动设置 drawBounds('district','白云区',[113.272712,23.25706]);//没有手动设置中心点,自动设置 drawBounds('district','从化区');//没有手动设置中心点,自动设置 drawBounds('district','荔湾区',[113.218969,23.067025]);//没有手动设置中心点,自动设置 drawBounds('district','黄埔区',[113.481006,23.180997]);//没有手动设置中心点,自动设置 drawBounds('district','花都区');//没有手动设置中心点,自动设置 drawBounds('district','番禺区');//没有手动设置中心点,自动设置 drawBounds('district','南沙区',[113.566774,22.706145]);//没有手动设置中心点,自动设置 drawBounds('district','海珠区',[113.316774,23.086145]);//没有手动设置中心点,自动设置 drawBounds('district','增城区',[113.716774,23.286145]);//没有手动设置中心点,自动设置 map.setFitView(polygons);//视口自适应 } initArea();</script></body></html>————————————————版权声明:本文为CSDN博主「牟云飞」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:/d/file/gt/2023-09/xbtzptiwqzf

更多攻略
游戏推荐
更多+