zoukankan      html  css  js  c++  java
  • 地图地区生成随机点

    自己简单封装了下百度地图(这个网址直接用)

    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>
          <button onclick="generatePos()">生成</button>
        </div>
        <div id="allmap" style=" 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 num = document.getElementById("num").value;
        var bdary = new BMap.Boundary();
        //要显示的行政区域 可以是为 市 县 区
        bdary.get(areaName, function (rs) {
          //获取行政区域
          map.clearOverlays(); //清除地图覆盖物
          var count = rs.boundaries.length; //行政区域的点有多少个
          if (count === 0) {
            alert("未能获取当前输入行政区域");
            return;
          }
          let lat_max = 0;
          let lat_min = 360;
          let lng_max = 0;
          let lng_min = 360 ;
          rs.boundaries.forEach(v => {
            v.split(";").forEach(vv => {
              let n = vv.split(",");
              lng_max = n[0] > lng_max?n[0]:lng_max;
              lng_min = n[0] < lng_min?n[0]:lng_min;
    
              lat_max = n[1] > lat_max?n[1]:lat_max;
              lat_min = n[1] < lat_min?n[1]:lat_min;
            });
          });
         
          lat_range = lat_max - lat_min;
          lng_range = lng_max - lng_min;
    
          console.log(lat_max,lat_min,lat_range)
          console.log(lng_max,lng_min,lng_range)
    
          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 x = 0;
            var y = 0;
            var pt = null;
            var arr = [];
            for (var i = 0; i < num; i++) {
              x = (lng_min*100)/100 + (Math.random() * lng_range);
              y = (lat_min*100)/100 + (Math.random() * lat_range);
              console.log(x,y)
              pt = new BMap.Point(x, y);
              if (BMapLib.GeoUtils.isPointInPolygon(pt, ply)) {
                arr.push({
                  lat: y,
                  lng: x,
                });
                var marker = (marker = new BMap.Marker(new BMap.Point(x, y)));
                map.addOverlay(marker);
              }
            }
            console.log(arr);
            console.log(JSON.stringify(arr));
          }
          alert("生成成功!数量:" + arr.length + ",请查看console.log");
        });
      }
    </script>
    
    
    
    
  • 相关阅读:
    【Lintcode】91 最小调整代价
    【LintCode】29 交叉字符串
    十二、动态规划
    HttpClient的简单使用
    ajax跨域请求
    session共享
    八大排序算法
    MAC 脚本批量启动应用
    知识点整理-bio、nio的简单demo
    知识点整理-数组如何实现随机访问?
  • 原文地址:https://www.cnblogs.com/zjhblogs/p/15080228.html
Copyright © 2011-2022 走看看