基于百度地图实现省内坐标点添加

最新推荐文章于 2023-12-29 15:41:55 发布

Sir丶糯米

最新推荐文章于 2023-12-29 15:41:55 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/a4638966/article/details/90440593

版权

记录类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

感谢https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618提供的地图遮罩

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak值"></script>
  <script type="text/javascript"
    src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #container {
      width: 100%;
      height: 100%;
    }

    .info-box {
      width: 130px;

      padding: 20px;

      background: rgba(36,110,221, .5);
    }

    .info-box p {
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    // 需要引入api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
    // 创建百度地图map实例
    var map = new BMap.Map("container");
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(113.67281, 34.757473), 8);
    // 设置地图显示的城市，这项是必须的
    map.setCurrentCity("郑州");
    // 开启滚轮缩放
    map.enableScrollWheelZoom(true);
    // 声明一个数组，装行政区域的数据
    var blist = [];
    // 设置一个计数器，用来判断什么时候加载完成行政区域，然后画图
    var districtLoading = 0;
    // 添加行政区划
    function getBoundary() {
      // 计数器来控制加载过程
      districtLoading++;
      // 创建行政区划的对象实例
      var bdary = new BMap.Boundary();
      // 获取行政区域
      bdary.get("河南省", function (rs) {
        // 清除地图覆盖物
        // map.clearOverlays();
        // 行政区域的点有多少个
        var count = rs.boundaries.length;
        if (count === 0) {
          alert('未能获取当前输入行政区域');
          return;
        }
        var pointArray = [];
        for (var i = 0; i < count; i++) {
          blist.push({points: rs.boundaries[i], name: '河南'})
        }
        // 调整视野
        // map.setViewport(pointArray);
        // 执行完成后计数器 -1；
        districtLoading--;
        if (districtLoading === 0) {
          // 画多边形来框选地图范围（边界）
          drawBoundary();
        }
      });
    }
    function drawBoundary () {
      // 包含所有区域的点数组
      var pointArray = [];
      /*
        画遮蔽层的相关方法
        思路：首先在中国地图最外侧画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并取来，并全部连接到西北角。
        这样就做出了一个经过多次西北角的闭合多边形
      */
      // 定义中国东南西北端点，作为第一层
      var pNW = { lat: 59.0, lng: 73.0 }
      var pNE = { lat: 59.0, lng: 136.0 }
      var pSE = { lat: 3.0, lng: 136.0 }
      var pSW = { lat: 3.0, lng: 73.0 }
      // 向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      // 循环添加各闭合区域
      for (var i=0;i< blist.length;i++) {
        // 建立多边形覆盖物
        var ply = new BMap.Polygon(blist[i].points, {strokeWeight: 2, strokeColor: '#0070C9',fillOpacity: 0.01, fillColor: '#ffffff'})
        ply.name = blist[i].name;
        map.addOverlay(ply);
      }
      // 添加行政区划建立多边形覆盖物那里不理解，示例地址：http://lbsyun.baidu.com/jsdemo.htm#c1_10
      //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
      var path = ply.getPath();
      pArray = pArray.concat(path);
      pArray.push(pArray[0]);
      var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.7 }); //建立多边形覆盖物
      map.addOverlay(plyall);
    }
    // 使用添加点的方法
    addPoint();
    // 添加坐标点
    function addPoint () {
      // 生成坐标点
      // 我这里是随机取了河南省的几个坐标，用来添加坐标点
      var positionArray = [
        [113.701699,34.756999],
        [113.585998,34.714994],
        [113.768533,34.714638],
        [112.977737,34.658004],
        [113.861957,34.534389],
        [114.45412,36.092283],
        [114.477099,35.745347],
        [112.56378,33.324863],
        [115.69132,34.307679]
      ]
      for (var i=0;i< positionArray.length;i++) {
        // 一个坐标对应一个mark的生成
        var point = new BMap.Point(positionArray[i][0],positionArray[i][1]);
        addMark(point);
      }
    };
    function addMark(point) {
      // 生成图像标注
      var mark = new BMap.Marker(point);
      map.addOverlay(mark);
      // 添加鼠标划入坐标点的显示内容
      str = '';
      str += '<div class="info-box">';
      str += '<p>备电点：100</p>';
      str += '<p>充点电：50</p>';
      str += '<p>换电点：200</p>';
      str += '<p>售电点：100</p>';
      str += '<p>蓄电池：400</p>';
      str += '</div>';
      // 创建一个文本标注实例
      var lable = new BMap.Label(str);
      // 清除百度地图自带样式
      lable.setStyle({
        border: 'none',
        border: '1px solid rgba(36,110,221, .5)'
      });
      // 设置标注的地理坐标
      lable.setPosition(point);
      // 默认不显示文本标注
      lable.hide();
      // 在全景场景内添加覆盖物
      map.addOverlay(lable);
      mark.addEventListener('mouseover', function () {
        lable.show();
      });
      mark.addEventListener('mouseout', function () {
        lable.hide();
      });
    }
    // 使用行政区划
    setTimeout(function () {
      getBoundary();
    }, 100);
  </script>
</body>

</html>

理论上赋值下来就能用，新手使用百度地图，勿喷

Sir丶糯米

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于百度地图实现省内坐标点添加

感谢https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618提供的地图遮罩效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
复制链接

扫一扫

专栏目录