最近要使用百度地图实现楼盘可视化的功能，因此最基础的功能就是将地图网格化以后实现不同地域的楼盘划分；本文主要为大家分享一篇使用百度地图实现地图网格的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
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>
<p id="container"></p>
<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;//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: '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);
}
相关推荐：
php百度地图开发之距离计算的实例分享
react框架遇上百度地图怎么办？
js开发用到百度地图的代码整理
以上就是利用百度地图实现地图网格的实例分享的详细内容。