地圖地區生成隨機點

阿新 • • 發佈：2021-07-30

自己簡單封裝了一下（這個網址直接用）

https://static-d9bc5ad6-69a7-454e-a8e4-80069e587f92.bspapp.com/map.html

如果網址炸了請手動：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百度地圖隨機生成某個行政區域的隨機座標</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=2.0&ak=kx3YUGkPTCwLcX8FMEAcLgxNzf7b8Hug"
    ></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"
    ></script>
  </head>
  <body>
    <div>注意需要關閉廣告攔截外掛！攔截外掛會把百度地圖生成元件遮蔽導致無法生成座標</div>
    <div>
      地區名：
      <input
        id="name"
        type="text"
        placeholder="地區名：太倉市"
        value="太倉市"
      />
      隨機生成數：
      <input
        id="num"
        type="text"
        name="num"
        placeholder="隨機生成數"
        value="500"
      />
    </div>
    <div>
      最小經度：
      <input
        id="lng"
        type="text"
        name="lng"
        placeholder="最小經度"
        value="121.00"
      />
      最小緯度：
      <input
        id="lat"
        type="text"
        name="lat"
        placeholder="最小緯度"
        value="31.22"
      />
    </div>
    <div>
      經度範圍：
      <input
        id="lng_range"
        type="text"
        name="num"
        placeholder="經度範圍:經度最大+0.8就填0.8"
        value="0.5"
      />
      緯度範圍：
      <input
        id="lat_range"
        type="text"
        name="num"
        placeholder="緯度範圍:緯度最大+0.8就填0.8"
        value="0.5"
      />
      <button onclick="generatePos()">生成</button>
    </div>
    <div id="allmap" style="width: 1000px; height: 500px"></div>
  </body>
</html>
<script type="text/javascript">
  var map = {}; //初始化全域性map
  window.onload = function () {
    map = new BMap.Map("allmap");
    //中心點座標
    map.centerAndZoom(new BMap.Point(113.665336, 34.753203), 5);
    map.enableScrollWheelZoom();
  };

  // 生成座標點
  function generatePos() {
    var areaName = document.getElementById("name").value;
    var lng = document.getElementById("lng").value;
    var lat = document.getElementById("lat").value;
    var num = document.getElementById("num").value;
    var lat_range = document.getElementById("lat_range").value;
    var lng_range = document.getElementById("lng_range").value;
    var bdary = new BMap.Boundary();
    //要顯示的行政區域 可以是為 市 縣 區
    bdary.get(areaName, 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]); //建立多邊形覆蓋物
        map.addOverlay(ply); //新增覆蓋物
        pointArray = pointArray.concat(ply.getPath());
        map.setViewport(pointArray);
        //控制座標範圍
        var res = "";
        var minX = Math.floor(lng * 100) / 100; //這裡控制生成座標的範圍
        var minY = Math.floor(lat * 100) / 100; //這裡控制生成座標的範圍
        console.log(minX, minY);

        var x = 0;
        var y = 0;
        var pt = null;
        var arr = [];
        for (var i = 0; i < num; i++) {
          x = minX + Math.random() * lng_range;
          y = minY + Math.random() * lat_range;
          pt = new BMap.Point(x, y);
          if (BMapLib.GeoUtils.isPointInPolygon(pt, ply)) {
            //console.log(x,y);
            arr.push({
              lat: y,
              lng: x,
            });
            var marker = (marker = new BMap.Marker(new BMap.Point(x, y)));
            map.addOverlay(marker);
            // res += 'marker = new BMap.Marker(new BMap.Point(' + x + ' ,' + y + '));<br/>map.addOverlay(marker);<br/>  ';
          }
        }
        console.log(arr);
        console.log(JSON.stringify(arr));
      }
      alert("生成成功！數量：" + arr.length + "，請檢視console.log");
    });
  }
</script>