Home > Article > Web Front-end > How to implement map grid using Baidu Maps

How to implement map grid using Baidu Maps

亚连Original: 2018-06-07 15:24:164606browse

Below I will share with you an example of using Baidu Map to implement a map grid. It has a good reference value and I hope it will be helpful to everyone.

Foreword: Recently, Baidu Map has been used to realize the function of real estate visualization, so the most basic function is to grid the map to realize the division of real estate in different regions;

1. Go to the open platform of Baidu Maps to apply for a secret key. Here I will post my secret key; ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4

2. Create a new simple page. Below I will Post your own page

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <style type="text/css">
  html {
   height: 100%
  }
  body {
   height: 100%;
   margin: 0px;
   padding: 0px
  }
  #container {
   height: 100%
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script> 
<script type="text/javascript" src="ziroom-map.js"></script>
 </head>
 <body> 
<p id="container"></p>
 <script> 
var myMap = new ZMap("container"); </script>
 </body>
 </html>

3, which introduces ziroom-map.js, which is the name of our company. I posted the code. This js encapsulates Baidu's js api. If anyone wants to ask why it is encapsulated, can't it be used directly? Then my answer is: Encapsulation can combine specific businesses and maps to make the code clearer, and can persist the status of the current map, which is beneficial to the operation of the map.

var ZMap = function (id, center, level) {
 this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点，同时为了定义网格的中心点
 this.id = id;//p的id
 this.level = level ? level : 13;//地图级别
 this.center = center ? center : this.initCenter;//中心点
 this.map = null;//百度地图实例
 this.xgrids = [];//经线
 this.ygrids = [];//纬线
 this.beSelectBounds = {};
 this.bounds = null;//当前地图的四个顶点
 this.span = null;//当前网格的跨度
 this.init();
}
ZMap.prototype = {
 init: function () {//全局初始化
  var zMap = this;
  this.map = new BMap.Map(this.id);
  this.map.centerAndZoom(this.center.point, this.level);
  this.map.enableScrollWheelZoom();
  this.map.disableInertialDragging();
  this.map.addControl(new BMap.NavigationControl({
   anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
   type: BMAP_NAVIGATION_CONTROL_ZOOM
  })); //缩放按钮
  this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
  this.map.disableDoubleClickZoom();
  this.map.setMapStyle({style: &#39;googlelite&#39;});
  this.initProperty();
  this.initGrid();
  //添加移动后的点击事件
  this.map.addEventListener("dragend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //添加放大或缩小时的事件
  this.map.addEventListener("zoomend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //设置点击事件
  this.map.addEventListener("click", function (e) {
   var point = e.point;
   //获取当前点是在哪个区块内,获取正方形的四个顶点
   var points = zMap.getGrid(point);
   //判断当前区域是否已经被选中过，如果被选中过则取消选中
   var key = &#39;&#39; + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
   if (zMap.beSelectBounds[key]) {
    zMap.map.removeOverlay(zMap.beSelectBounds[key]);
    delete zMap.beSelectBounds[key];
    return;
   }
   var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
   zMap.map.addOverlay(polygon);
   zMap.beSelectBounds[key] = polygon;
  });
 },
 initProperty: function () {//初始化当前地图的状态
  this.level = this.map.getZoom();
  this.bounds = {
   x1: this.map.getBounds().getSouthWest().lng,
   y1: this.map.getBounds().getSouthWest().lat,
   x2: this.map.getBounds().getNorthEast().lng,
   y2: this.map.getBounds().getNorthEast().lat
  };
  this.span = this.getSpan();//需要使用level属性
 },
 initGrid: function () {//初始化网格
  var zMap = this;
  //将原来的网格线先去掉
  for (var i in zMap.xgrids) {
   this.map.removeOverlay(zMap.xgrids[i]);
  }
  zMap.xgrids = [];
  for (var i in zMap.ygrids) {
   this.map.removeOverlay(zMap.ygrids[i]);
  }
  zMap.ygrids = [];
  //获取当前网格跨度
  var span = zMap.span;
  //初始化地图上的网格
  for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
   var polyline = new BMap.Polyline([
    new BMap.Point(i.toFixed(6), zMap.bounds.y1),
    new BMap.Point(i.toFixed(6), zMap.bounds.y2)
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.xgrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
  for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
   var polyline = new BMap.Polyline([
    new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
    new BMap.Point(zMap.bounds.x2, i.toFixed(6))
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.ygrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
 },
 getSpan: function () {//获取网格的跨度
  var scale = 0.75;
  var x = 0.00064;
  for (var i = this.level; i < 19; i++) {
   x *= 2;
  }
  var y = parseFloat((scale * x).toFixed(5));
  return {x: x, y: y};
 },
 getGrid: function (point) {//返回当前点在所在区块的四个顶点
  var zMap = this;
  //先找出两条纵线坐标
  var xpoints = this.xgrids.map(function (polyline) {
   return polyline.getPath()[0].lng;
  }).filter(function (lng) {
   return Math.abs(lng - point.lng) <= zMap.span.x;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  //再找出两条横线的坐标
  var ypoints = this.ygrids.map(function (polyline) {
   return polyline.getPath()[0].lat;
  }).filter(function (lat) {
   return Math.abs(lat - point.lat) <= zMap.span.y;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  return [
   new BMap.Point(xpoints[0], ypoints[0]),
   new BMap.Point(xpoints[0], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[0])
  ];
 },
 reset: function () {//重置
  this.map.reset();
 }
}
var ZPoint = function (x, y, code) {
 this.code = code;
 this.point = new BMap.Point(x, y);
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Use node.js to implement Douyin’s automatic red envelope grabbing function

How to fill in the default avatar in javascript

Use webpack to package and deal with the problem of excessively large bundle.js files

The above is the detailed content of How to implement map grid using Baidu Maps. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use selenium to capture Taobao data informationNext article：Use selenium to capture Taobao data information

See more

How to implement map grid using Baidu Maps

Related articles