使用百度地图实现地图网格的示例使用百度地图实现地图网格的示例
下面小编就为大家分享一篇使用百度地图实现地图网格的示例，具有很好的参考价值，希望对大家有所帮助。
一起跟随小编过来看看吧
前言：前言：最近要使用百度地图实现楼盘可视化的功能，因此最基础的功能就是将地图网格化以后实现不同地域的楼盘划分；
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();
});
//添加放大或缩小时的事件
weixin_38675777
- 粉丝: 3
- 资源: 920
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- Xilinx SRIO详解.pptx
- Informatica PowerCenter 10.2 for Centos7.6安装配置说明.pdf
- 现代无线系统射频电路实用设计卷II 英文版.pdf
- 电子产品可靠性设计 自己讲课用的PPT，包括设计方案的可靠性选择，元器件的选择与使用，降额设计，热设计，余度设计，参数优化设计 和 失效分析等
- MPC5744P-DEV-KIT-REVE-QSG.pdf
- 通信原理课程设计报告（ASK FSK PSK Matlab仿真--数字调制技术的仿真实现及性能研究）
- ORIGIN7.0使用说明
- 在VMware Player 3.1.3下安装Redhat Linux详尽步骤
- python学生信息管理系统实现代码
- 西门子MES手册 13 OpcenterEXCR_PortalStudio1_81RB1.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0