详解Javascript百度地图接口开发文档中的类和方法
JavaScriptAPIv2.0介绍
百度地图JavaScriptAPI是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。
该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。
JavaScriptAPI首家支持Https,如需要申请Https服务,请您认证企业信息,成为企业认证用户后,https将自动开通,同时获得更高的服务配额。
注意:仅JavaScriptAPI
V2.0版本支持https,其他JavaScriptAPI版本均不支持。使用https服务,请先检查您的版本以及配置注意事项。
调用API的基本文件格式
获取JavaScriptAPI服务方法:
自JSAPIv1.5之后,最新版本为2.0,您需要首先申请密钥(ak),才可成功加载APIJS文件。
ak的使用方法如下:
<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak"您的密钥"type="text/javascript">
其中参数v为API当前的版本号,目前最新版本为2.0。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。。
创建地图实例
varmap=new BMap.Map("container"); //创建点坐标 varpoint=newBMap.Point(104.045,30.559); //地图初始化 map.centerAndZoom(point,15);
百度地图控件
向地图添加控件:
map.addControl(newBMap.NavigationControl()); //控件位置: varopts={offset:newBMap.Size(150,5)} map.addControl(newBMap.ScaleControl(opts)); //修改控件配置: varopts={type:BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(newBMap.NavigationControl(opts));
地图覆盖物
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。
//创建标注: varmarker=newBMap.Marker(newBMap.Point(104.045,30.559)); //将标注添加到地图中: map.addOverlay(marker);
地图信息窗口提示
信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于打开状态。
varopts={ width:250,//信息窗口宽度 height:100,//信息窗口高度 title:"Hello"//信息窗口标题 } varinfoWindow=newBMap.InfoWindow("World",opts);//创建信息窗口对象 map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口
地图信息窗口提示(事件触发显示)
事件方法与Map事件机制相同。可参考事件部分
监听标注事件:
marker.addEventListener("click",function(){ alert("您点击了标注"); });
给标注添加点击事件:
marker.addEventListener("click",function(){ map.openInfoWindow(infoWindow,map.getCenter()); });
定位(浏览器定位)
Geolocation地图定位,返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置,不支持的浏览器将无法获取。
创建Geolocation对象实例:
vargeolocation=newBMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus()==BMAP_STATUS_SUCCESS){//判断状态 varmk=newBMap.Marker(r.point);//创建一个地图标注 map.addOverlay(mk); map.panTo(r.point);//转向获取的地理坐标所在位置 alert('您的位置:'+r.point.lng+','+r.point.lat); } else{ alert('failed'+this.getStatus()); } })
定位(IP定位)
LocalCity此类用于获取用户所在的城市位置信息。(根据用户IP自动定位到城市)
创建LocalCity对象实例:
myCity=newBMap.LocalCity(); myCity.get(function(e){ map.setCenter(e.name); alert(e.name); });
定位(经纬度定位)
点击获取经纬度实例:
map.addEventListener("click",function(e){ alert(e.point.lng+","+e.point.lat); });
根据经纬度定位实例:
varnew_point=newBMap.Point(116.299689,40.1196618); varmarker=newBMap.Marker(new_point);//创建标注 map.addOverlay(marker);//将标注添加到地图中 map.panTo(new_point);
地址解析
varmyGeo=newBMap.Geocoder();//创建地址解析器实例 //将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市昌平区回龙观地铁站",function(point){ if(point){ map.centerAndZoom(point,15); map.addOverlay(newBMap.Marker(point));//在地图上标注地理位置 }else{ alert("您选择地址没有解析到结果!"); } },"北京市");
逆地址解析
Geocoder类用于获取用户的地址解析
vargeoc=newBMap.Geocoder(); map.addEventListener("click",function(e){ varpt=e.point;//点击位置的坐标点 geoc.getLocation(pt,function(rs){ varaddComp=rs.addressComponents; alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber); });
步行规划
WalkingRoute用于获取步行路线规划方案。创建一个步行导航实例。location表示检索区域,类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时,检索位置由当前地图中心点确定;当参数为坐标时,检索位置由该点所在位置确定;当参数为城市名称时,检索会在该城市内进行。
步行规划实例:
varwalking=newBMap.WalkingRoute(map,{renderOptions:{map:map,autoViewport:true}}); walking.search("天坛公园","故宫"); 获取步行导航的结果显示实例: varwalking=newBMap.WalkingRoute(map,{renderOptions:{map:map,panel:"r-result",autoViewport:true}}); walking.search("天坛公园","故宫");
驾车规划
DrivingRoute此类用于获取驾车路线规划方案
驾车线路规划实例:
vardriving=newBMap.DrivingRoute(map,{renderOptions:{map:map,panel:"r-result",autoViewport:true}}); driving.search("女子医院","王府井广场");
公交检索
TransitRoute用于获取公交路线规划方案
公交检索实例:
vartransit=newBMap.TransitRoute(map,{renderOptions:{map:map,panel:"r-result"}}); transit.search("中医大省医院","明宇金融广场");
信息检索
LocalSearch用于位置检索、周边检索和范围检索
关键字检索实例:
varlocal=newBMap.LocalSearch(map,{ renderOptions:{map:map} }); local.search("景点");
本地检索结果实例:
varlocal=newBMap.LocalSearch(map,{ renderOptions:{map:map,panel:"r-result"} }); local.search("餐饮");
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。