📚博客主页:knighthood2001
✨公众号:认知up吧 (目前正在带领大家一起提升认知,感兴趣可以来围观一下)
🎃知识星球:【认知up吧|成长|副业】介绍
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️
🙏笔者水平有限,欢迎各位大佬指点,相互学习进步!
注意更改自己的ak值,才能使用,如果没有,就去申请个人开发者
随机生成填充色
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
这段代码,就是用来随机生成16进制下的颜色。
绑定回车键
document.getElementById("districtName").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
getBoundary();
}
});
让我们逐步解释这段代码:
-
document.getElementById("districtName"):
这是一个DOM(文档对象模型)方法,用于获取页面上ID为districtName的元素。通常,这个元素是一个HTML元素,比如一个标签。 -
.addEventListener("keypress", function(event) {...}):
这是一个方法,用于为指定的元素添加事件监听器。
在这里,我们为districtName元素添加了一个keypress事件的监听器。这意味着每当用户在districtName元素上按下一个键时,都会触发这个监听器,并执行后面的函数。 -
function(event) {...}:
这是一个匿名函数,当keypress事件被触发时,它会被执行。
event是一个对象,它包含了与事件相关的所有信息。例如,它包含了被按下的键的信息。 -
if (event.key === "Enter") {...}:
这是一个条件语句,用于检查被按下的键是否是“Enter”键。
event.key是一个属性,它包含了被按下的键的名称或字符。 -
getBoundary();:
如果上面的条件成立(即用户按下了Enter键),则执行这个函数调用。
getBoundary是一个函数,但从这段代码中我们不能确定它的具体实现和功能。但从名字来看,它可能是用于获取某个区域的边界或轮廓的。
总结:这段代码的主要功能是,当用户在ID为districtName的元素(很可能是一个输入框)中按下Enter键时,调用getBoundary函数。
全部代码
<!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 bdary = new BMapGL.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function (res) {
map.clearOverlays();
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>
结果如下: