写一份利用html语言结合百度地图api高亮显示重庆市的地图,其他省市区域进行遮盖的完整代码
时间: 2024-06-03 07:12:50 浏览: 12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图API高亮显示重庆市的地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
<style type="text/css">
#container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 初始化地图
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(106.55839,29.56897), 12); // 以重庆市为中心,缩放级别为12
// 设置地图样式
map.setMapStyle({styleJson:[
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 10,
"saturation": -100
}
}
]});
// 添加重庆市边界
var boundary = new BMap.Boundary();
boundary.get("重庆市", function(rs){
// 处理边界数据
var count = rs.boundaries.length;
if (count === 0) {
alert("未能获取到边界数据!");
return;
}
// 遍历边界数据
for (var i = 0; i < count; i++) {
var polygon = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000", fillColor: "#ff0000", fillOpacity: 0.5}); // 设置重庆市边界的样式
map.addOverlay(polygon); // 添加重庆市边界到地图
}
});
// 添加遮盖层
var styleOptions = {
strokeColor:"#ccc",
fillColor:"#ccc",
strokeWeight: 0.1,
opacity: 0.5,
fillOpacity: 0.5
};
var district = [
{"name":"北京市"},
{"name":"天津市"},
{"name":"上海市"},
{"name":"重庆市"},
{"name":"河北省"},
{"name":"山西省"},
{"name":"辽宁省"},
{"name":"吉林省"},
{"name":"黑龙江省"},
{"name":"江苏省"},
{"name":"浙江省"},
{"name":"安徽省"},
{"name":"福建省"},
{"name":"江西省"},
{"name":"山东省"},
{"name":"河南省"},
{"name":"湖北省"},
{"name":"湖南省"},
{"name":"广东省"},
{"name":"海南省"},
{"name":"四川省"},
{"name":"贵州省"},
{"name":"云南省"},
{"name":"陕西省"},
{"name":"甘肃省"},
{"name":"青海省"},
{"name":"台湾省"},
{"name":"内蒙古自治区"},
{"name":"广西壮族自治区"},
{"name":"西藏自治区"},
{"name":"宁夏回族自治区"},
{"name":"新疆维吾尔自治区"},
{"name":"香港特别行政区"},
{"name":"澳门特别行政区"}
];
var opts = {
width: 200,
height: 100,
title: ""
};
for (var i = 0; i < district.length; i++) {
var name = district[i].name;
var bdary = new BMap.Boundary();
bdary.get(name, function(rs) {
var count = rs.boundaries.length;
for (var j = 0; j < count; j++) {
var ply = new BMap.Polygon(rs.boundaries[j], styleOptions);
map.addOverlay(ply);
}
});
}
</script>
</body>
</html>
需要替换代码中的“你的AK”为你的百度地图API密钥。