博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图API 应用实例
阅读量:6761 次
发布时间:2019-06-26

本文共 1892 字,大约阅读时间需要 6 分钟。

最近在做一个GIS路线查询页面,要用到地图,开始想用GOOGLE,但中国地图还是百度比较详细

 

第一步:引用百度API的JS库

第二步:创建放置地图的DIV

第三步:创建地图

var map = new BMap.Map("clientmap");                             //创建地图实例

到这里就可以开始实现地图,接下来是地图的一些常用操作

map.addControl(new BMap.NavigationControl());                    //添加默认缩放平移控件map.addControl(new BMap.ScaleControl());                         //添加默认比例尺控件map.addControl(new BMap.OverviewMapControl());                   //添加默认缩略地图控件 map.addControl(new BMap.MapTypeControl());                       //2D图,卫星图  map.enableScrollWheelZoom();                                     //启用滚轮放大缩小,默认禁用map.enableContinuousZoom();

地址解析器实例

var myGeo = new BMap.Geocoder();                                 //创建地址解析器实例myGeo.getPoint(data.rows[i].address, function (point) {             // 将地址解析结果显示在地图上,并调整地图视野   if (point) {    map.centerAndZoom(point, 10);                              //设置中心点并按系数放大  }}, "");

创建标注并点击标注弹出信息提示

//信息内容var sContent = "
" +"
" +"
" +"
" +"
" +"
" +"
" +"
" +"
客户名称: " + data.rows[i].name + "
联系人: " + data.rows[i].linkman + "
手机号码: " + data.rows[i].mobile + "
固定电话: " + data.rows[i].phone + "
传真: " + data.rows[i].fax + "
Email: " + data.rows[i].email + "
客户地址: " + data.rows[i].address + "
";var marker = new BMap.Marker(point); // 创建标注var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象marker.addEventListener("click", function () { // 标注点击打开信息窗口  this.openInfoWindow(infoWindow);}); map.addOverlay(marker);                                    // 将标注添加到地图中

将折线添加到地图中

var polyline = new BMap.Polyline([points, point]);     //折线蓝色、宽度为6map.addOverlay(polyline);                              // 将折线添加到地图中

 

 

转载地址:http://qpfeo.baihongyu.com/

你可能感兴趣的文章
Expert 诊断优化系列------------------语句调优三板斧
查看>>
怎样使用下载的bootstrap模板?
查看>>
P1636 Einstein学画画
查看>>
TCP/IP 协议簇 端口 三次握手 四次挥手 11种状态集
查看>>
java正则表达式:验证字符串数字
查看>>
Linux中最常用的JAVA_HOME配置
查看>>
Shiro系列(1) - 权限管理的介绍与原理
查看>>
php页面zend加密乱码的解决办法
查看>>
按日期、时间批量删除文件
查看>>
Ubuntu16.04部署phantomjs的一个问题
查看>>
总结js(1)
查看>>
CTF---Web入门第四题 Forms
查看>>
PowerDesigner的安装
查看>>
webservices 服务器未能识别 HTTP 头 SOAPAction 的值:.
查看>>
iOS应用开发,全局强制竖屏,部分页面允许旋转的处理
查看>>
Linux运维教程
查看>>
Git学习
查看>>
问到的问题
查看>>
iOS网络模块优化(失败重发、缓存请求有网发送)
查看>>
经典SQL语句大全(绝对的经典)
查看>>