Gaode map sets the administrative area and custom text content, the text content can be automatically placed in the center position, if there is a deviation in the position, manual adjustment is supported. (ps: turf.js geospatial analysis library, processing various map algorithms)
/**
* type, display level district, province, city
* areaname, administrative district name
* labePosition, text position, center point is not manually set, automatically set
* */
drawBounds('district','Yuexiu District',[113.28637,23.127901 ]);
In the function of this method, it takes a little time to get the center point of the text. After setting the custom text style, the position setting of the text takes a little time. By setting the initial point + the middle point, the average calculation is not ideal, and then It is processed through the turfjs library (ps: turf.js geospatial analysis library, which handles various map algorithms) . Since it is necessary to process input parameters, I searched for the data returned by Gaode and found result.districtList[ 0] The returned variable contains the center point:
var bounds_center = result.districtList[0].center;
After trying, I found that some coordinates are a bit cheap, and then add manual adjustment. When the text position is not manually set the center point, the text center point is automatically set. The source code is as follows
<!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.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html,body,#container{
margin:0;
height:100%;
}
.input-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="https://webapi.amap.com/maps?v=1.4.15&key=改成自己key&plugin=AMap.DistrictSearch"></script>
<script 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].center;
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>