📚博客主页:knighthood2001
✨公众号:认知up吧 (目前正在带领大家一起提升认知,感兴趣可以来围观一下)
🎃知识星球:【认知up吧|成长|副业】介绍
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️
🙏笔者水平有限,欢迎各位大佬指点,相互学习进步!
注意更改自己的ak值,才能使用,如果没有,就去申请个人开发者
改动代码主要是这个getBoundary函数。
function getBoundary() {
var input = document.getElementById("districtName").value;
var names = input.split(","); // 假设用户使用逗号分隔多个地区名称
var bdary = new BMapGL.Boundary();
// 清除之前的叠加层
map.clearOverlays();
// 对每个地区名称进行处理
names.forEach(function(name) {
name = name.trim(); // 去除可能的前后空格
if (name) { // 检查名称是否为空
bdary.get(name, function(res) {
var count = res.boundaries.length;
for (var i = 0; i < count; i++) {
var fillColor = getRandomColor();
var ply = new BMapGL.Polygon(res.boundaries[i], {
strokeWeight: 2,
strokeColor: "#FF0000",
fillColor: fillColor
});
map.addOverlay(ply);
// 根据实际情况调整是否需要每次设置视图,可能会导致地图频繁跳动
// map.setViewport(ply.getPath());
}
});
}
});
}
首先就是通过空格对输入内容进行划开。接着就是对每个地区进行随机颜色填充。这里把跳转到地区的设置给关了,否则会一直跳来跳去。
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示行政区边界范围</title>
<style type="text/css">
body {
font-size: 13px;
margin: 10px;
}
#container {
width: 100%;
height: 750px;
border: 1px solid gray;
}
</style>
</head>
<body>
输入省、直辖市或县名称:
<input type="text" id="districtName" style="width:80px" value="杭州">
<input type="button" onclick="getBoundary()" value="获取轮廓线">
<br/><br/>
<div id="container"></div>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=z5Ev4RsgO4dvncp9TnCHlh0kBPmprZbJ"></script>
<script>
var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(112.947058,28.233462), 12);
map.enableScrollWheelZoom();
map.setMapType(BMAP_EARTH_MAP);
document.getElementById("districtName").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
getBoundary();
}
});
function getBoundary() {
var input = document.getElementById("districtName").value;
var names = input.split(" "); // 假设用户使用空格分隔多个地区名称
var bdary = new BMapGL.Boundary();
// 清除之前的叠加层
map.clearOverlays();
// 对每个地区名称进行处理
names.forEach(function(name) {
name = name.trim(); // 去除可能的前后空格
if (name) { // 检查名称是否为空
bdary.get(name, function(res) {
var count = res.boundaries.length;
for (var i = 0; i < count; i++) {
var fillColor = getRandomColor();
var ply = new BMapGL.Polygon(res.boundaries[i], {
strokeWeight: 2,
strokeColor: "#FF0000",
fillColor: fillColor
});
map.addOverlay(ply);
// 根据实际情况调整是否需要每次设置视图,可能会导致地图频繁跳动
// map.setViewport(ply.getPath());
}
});
}
});
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
如果你需要边框和填充颜色一样,你只需要改动。strokeColor
为fillColor
即可。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示行政区边界范围</title>
<style type="text/css">
body {
font-size: 13px;
margin: 10px;
}
#container {
width: 100%;
height: 750px;
border: 1px solid gray;
}
</style>
</head>
<body>
输入省、直辖市或县名称:
<input type="text" id="districtName" style="width:120px" value="杭州">
<input type="button" onclick="getBoundary()" value="获取轮廓线">
<br/><br/>
<div id="container"></div>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=vkKJugWFCxRYbmVunfTWLfAk2DkoVw7U"></script>
<script>
var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(112.947058,28.233462), 12);
map.enableScrollWheelZoom();
map.setMapType(BMAP_EARTH_MAP);
document.getElementById("districtName").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
getBoundary();
}
});
function getBoundary() {
var input = document.getElementById("districtName").value;
var names = input.split(" "); // 假设用户使用空格分隔多个地区名称
var bdary = new BMapGL.Boundary();
// 清除之前的叠加层
map.clearOverlays();
// 对每个地区名称进行处理
names.forEach(function(name) {
name = name.trim(); // 去除可能的前后空格
if (name) { // 检查名称是否为空
bdary.get(name, function(res) {
var count = res.boundaries.length;
for (var i = 0; i < count; i++) {
var fillColor = getRandomColor();
var ply = new BMapGL.Polygon(res.boundaries[i], {
strokeWeight: 2,
strokeColor: fillColor,
fillColor: fillColor
});
map.addOverlay(ply);
// 根据实际情况调整是否需要每次设置视图,可能会导致地图频繁跳动
// map.setViewport(ply.getPath());
}
});
}
});
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>