调用百度地图API：随机生成填充颜色

knighthood2001

于 2024-05-22 14:16:18 发布

阅读量711

点赞数 12

分类专栏：百度地图文章标签：百度

本文链接：https://blog.csdn.net/knighthood2001/article/details/139065865

版权

百度地图专栏收录该内容

6 篇文章 0 订阅

订阅专栏

📚博客主页：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>