使用百度地图实现地图网格的示例


Posted in Javascript onFebruary 06, 2018

前言:最近要使用百度地图实现楼盘可视化的功能,因此最基础的功能就是将地图网格化以后实现不同地域的楼盘划分;

1,自行去百度地图的开放平台申请秘钥哈,这里我就把自己的秘钥贴出来了;ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4

2,新建一个简单页面,下面我把自己的页面贴出来

<!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> 
<div id="container"></div>
 <script> 
var myMap = new ZMap("container"); </script>
 </body>
 </html>

3,其中引入了ziroom-map.js,这是我们公司的名字啦,我把代码贴出来,这个js是封装了百度的js的api的,有人如果要问为什么封装,直接使用不可以么?那我的回答是:封装可以将具体业务和地图相结合,使代码更清晰,并且可以持久化当前地图的状态,利于实现对地图的操作。

var ZMap = function (id, center, level) {
 this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点,同时为了定义网格的中心点
 this.id = id;//div的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: 'googlelite'});
  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 = '' + 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);
}

总结:好了这篇随笔就这么多了,欢迎大家指正。

以上这篇使用百度地图实现地图网格的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
js中的闭包学习心得
Feb 06 #Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 #Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
详解React开发必不可少的eslint配置
Feb 05 #Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
You might like
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
php4的session功能评述(一)
2006/10/09 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
python交互界面的退出方法
2019/02/16 Python
Python自动抢红包教程详解
2019/06/11 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python如何实现单链表的反转
2020/02/10 Python
Python如何省略括号方法详解
2020/03/21 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
结婚邀请函范文
2014/01/14 职场文书
新年祝酒词大全
2015/08/11 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL