本文介绍了如何在地图上添加自定义标注，特别是在区县级别。通过选择省份、城市和区县，可以显示红色边框的行政区划，并允许用户点击添加标注。实现过程涉及获取区县经纬度、使用city.json文件和百度地图API。提供的源码包括HTML、JavaScript和CSS，可以直接复制使用。此外，还提供了JSON文件和相关资源的下载链接，以便读者自行实践。
百度地图实现对区县添加标注
在实际开发过程中，我们可能会有这样的需求，自定义地图并在地图上自己想要的区域地方添加标注，本文介绍实现过程以及提供源码，复制粘贴即可实现想要的功能。
注意：本文使用百度地图API
1.地图添加标注效果图
如上图所示，首先在三个下拉栏框中选择想要标注的区县，最终区县会以红色边线绘出，点击添加标注即可实现在此区域题添加一个标注。
2.实现原理
实现原理比较简单，简单来说就是首先获取到区县的经纬度，然后再在此经纬度上添加标注即可。而经纬度的获取又是通过在city.json文件中获取，添加标注的的功能查看百度地图API即可实现。
3.实现源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ycTgY5YTSnk5PsqumqZboxtXaKU6Io6K">
</script>
<title>添加行政区划</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
</head>
<body>
<!--<div>
<select name="" id="">
<option value="">广东</option>
<option value="">湖南</option>
<option value="">江西</option>
</select>
<select name="" id="">
<option value="">广州</option>
<option value="">深圳</option>
</select>
</div>-->
<form class="form-inline">
<div id="distpicker5">
<div class="form-group">
<label class="sr-only" for="province10">省</label>
<select class="form-control" id="province10">
<option value="" data-code="">-- 请选择 --</option>
<option value="北京市" data-code="110000">北京市</option>
<option value="天津市" data-code="120000">天津市</option>
<option value="河北省" data-code="130000">河北省</option>
<option value="山西省" data-code="140000">山西省</option>
<option value="内蒙古自治区" data-code="150000">内蒙古自治区</option>
<option value="辽宁省" data-code="210000">辽宁省</option>
<option value="吉林省" data-code="220000">吉林省</option>
<option value="黑龙江省" data-code="230000">黑龙江省</option>
<option value="上海市" data-code="310000">上海市</option>
<option value="江苏省" data-code="320000">江苏省</option>
<option value="浙江省" data-code="330000">浙江省</option>
<option value="安徽省" data-code="340000">安徽省</option>
<option value="福建省" data-code="350000">福建省</option>
<option value="江西省" data-code="360000">江西省</option>
<option value="山东省" data-code="370000">山东省</option>
<option value="河南省" data-code="410000">河南省</option>
<option value="湖北省" data-code="420000">湖北省</option>
<option value="湖南省" data-code="430000">湖南省</option>
<option value="广东省" data-code="440000">广东省</option>
<option value="广西壮族自治区" data-code="450000">广西壮族自治区</option>
<option value="海南省" data-code="460000">海南省</option>
<option value="重庆市" data-code="500000">重庆市</option>
<option value="四川省" data-code="510000">四川省</option>
<option value="贵州省" data-code="520000">贵州省</option>
<option value="云南省" data-code="530000">云南省</option>
<option value="西藏自治区" data-code="540000">西藏自治区</option>
<option value="陕西省" data-code="610000">陕西省</option>
<option value="甘肃省" data-code="620000">甘肃省</option>
<option value="青海省" data-code="630000">青海省</option>
<option value="宁夏回族自治区" data-code="640000">宁夏回族自治区</option>
<option value="新疆维吾尔自治区" data-code="650000">新疆维吾尔自治区</option>
<option value="台湾省" data-code="710000">台湾省</option>
<option value="香港特别行政区" data-code="810000">香港特别行政区</option>
<option value="澳门特别行政区" data-code="820000">澳门特别行政区</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="city10">市</label>
<select class="form-control" id="city10">
<option value="" data-code="">-- 请选择 --</option>
</select>
</div>
<div class="form-group">
<label class="sr-only" for="district10">区</label>
<select class="form-control" id="district10">
<option value="" data-code="">-- 请选择 --</option>
</select>
</div>
<div class="form-group">
<!-- <div style="background-color: #fc5632;color: white; width: 60px; height: 30px;">添加标注</div> -->
<button type="button" style="color: #fc5632;" onclick="getLocation()">添加标注</button>
</div>
<!-- <input type="text" id="location"> -->
</div>
</form>
<style>
.form-inline {
position: absolute;
z-index: 9999
}
.form-inline .form-group {
display: inline-block;
}
</style>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//定义要添加标注城市数组
var allMarkerArr = [];
var map; //Map实例
function map_init() {
// 百度地图API功能
map = new BMap.Map("allmap");
//第1步：设置地图中心点，北京市
//第2步：初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(new BMap.Point(104.04124, 30.612882), 10);
//第3步：启用滚轮放大缩小
map.enableScrollWheelZoom();
}
//获取区域并绘制边框
function getBoundary(getcity) {
var bdary = new BMap.Boundary();
bdary.get(getcity, function(rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeColor: "#ff0000"
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
});
}
// 添加信息窗口
function addInfoWindow(marker, poi) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.name + '</div>';
//pop弹窗信息
var html = [];
html.push(
'<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), {
title: title,
width: 200
});
var openInfoWinFun = function() {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("click", openInfoWinFun);
return openInfoWinFun;
}
/* setTimeout(function(){
getBoundary();
}, 2000);*/
$("#province10").change(function() {
getBoundary($("#province10 option:selected").html())
})
$("#city10").change(function() {
getBoundary($("#province10 option:selected").html() + $("#city10 option:selected").html())
})
$("#district10").change(function() {
getBoundary($("#province10 option:selected").html() + $("#city10 option:selected").html() + $(
"#district10 option:selected").html())
})
//台湾钓鱼岛是中国地
function addlabel() {
var pointArray = [
new BMap.Point(121.716076, 23.703799),
new BMap.Point(112.121885, 14.570616),
new BMap.Point(123.776573, 25.695422)
];
var optsArray = [{}, {}, {}];
var labelArray = [];
var contentArray = [
"台湾是中国的！",
"南海是中国的！",
"钓鱼岛是中国的！"
];
for (var i = 0; i < pointArray.length; i++) {
optsArray[i].position = pointArray[i];
labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
labelArray[i].setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
map.addOverlay(labelArray[i]);
}
}
//默认选择
//addressInit('province', 'city', 'district', '广东', '深圳市', '宝安区');
//按钮点击事件
function getLocation() {
//获取经纬度json
function getJson() {
var cityJson;
$.ajax({
url: './json/city.json',
async: false,
success: function(res) {
cityJson = res;
}
});
return cityJson;
}
var cityJson = getJson();
console.log(cityJson);
var city = [];
city.push($('#province10').val());
city.push($('#city10').val());
city.push($('#district10').val());
console.log(city)
var p = cityJson.p;
var d = cityJson.d;
var c = cityJson.c;
//console.log(p,c,d)
for (var pKey in p) {
console.log("1111111")
if (p[pKey] == city[0]) { //取得对应的省
var ct = c[pKey]
console.log(p[pKey])
console.log(ct)
for (var cKey in ct) {
if (ct[cKey] == city[1]) { //取得对应的市
var dt = d[cKey];
console.log(cKey)
console.log(dt)
for (var dKey in dt) {
if (dt[dKey].name == city[2]) { //取得对应的区 并且获取经纬度
console.log(dKey);
console.log(dt[dKey].lon)
console.log(dt[dKey].lat)
$('#location').val(dt[dKey].lon + ',' + dt[dKey].lat)
//var markerObj=new Object();
// markerObj.name=city[2];
// markerObj.lon=dt[dKey].lon;
// markerObj.lat=dt[dKey].lat
// console.log("dt(dkey)")
// console.log(dt[dKey])
// console.log(markerObj)
// console.log("dt(dkey)")
allMarkerArr.push(dt[dKey])
break;
}
}
break;
}
}
break;
}
}
//第X步： 绘制点
for (var i = 0; i < allMarkerArr.length; i++) {
var p0 = allMarkerArr[i].lon;
var p1 = allMarkerArr[i].lat;
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, allMarkerArr[i], i);
}
}
// 添加标注
function addMarker(point, index) {
// var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
// new BMap.Size(23, 25), {
// offset: new BMap.Size(10, 25),
// imageOffset: new BMap.Size(0, 0 - index * 25)
// });
//var marker = new BMap.Marker(point, {
// icon: myIcon
// });
var marker = new BMap.Marker(point);
map.addOverlay(marker);
return marker;
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_init;
</script>
4.总结
在实现的过程中需要html文件的父目录下新建json和js两个文件夹，并把city.json添加进json文件夹， distpicker.data、distpicker、jquery-1.12.3.min、main四个js文件放入js文件夹中。
gitee地址：https://gitee.com/ranlanglang/map-add-marks.git
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
