`
lbxhappy
  • 浏览: 302965 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

百度MAP API使用步骤及说明

 
阅读更多
<p>
</p>
<p>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 关于利用百度地图API的使用说明</p>
<p>通过百度MAP API,能实现地图位置的标注、区域搜索、范围搜索、附近搜索、公交导航、驾车导航等服务,一下是实现各服务的具体步骤:</p>
<p>1、引用地图API的js文件</p>
<p>? ? ? ?v代表版本号,v=1.2代表1.2版本,目前最新是1.3</p>
<p>? ? ? ?service代表是否加装服务部分</p>
<p>? ? ?&lt;script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&amp;v=1.2&amp;services=true"&gt;&lt;/script&gt;</p>
<p>?</p>
<p>2、创建地图实例</p>
<p>? ? var map = new BMap.Map("mapDiv",{mapType:BMAP_NORMAL_MAP}); //地图所属容器 ,mapType代表地图类型</p>
<p>? ? ?map.setCurrentCity("北京");//设置当前城市,如果是以城市建筑显示,则必须设置此项</p>
<p>? ? mapType有多个枚举类型,详细参考用户手册</p>
<p>? ? map.centerAndZoom(point,13); //创建加载地图</p>
<p>? ? map.setCenter("朝阳");//设置地图中心点,支持point和地名</p>
<p>? ? map.enableScrollWheelZoom();//设置可以通过鼠标滚动、双击来进行地图的缩放</p>
<p>3、像地图添加控件操作</p>
<p>? ?//向地图中添加平移缩放控件</p>
<p>? ? ?var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});</p>
<p>? ? ?map.addControl(ctrl_nav);</p>
<p>? ? ? //向地图中添加缩略图控件</p>
<p>? ? ?var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});</p>
<p>? ? ?map.addControl(ctrl_ove);</p>
<p>? ? ?//向地图中添加比例尺控件</p>
<p>? ? ?var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});</p>
<p>? ? ?map.addControl(ctrl_sca);</p>
<p>? ? ?//像地图中添加地图显示类型控件</p>
<p>? ? ?var ctrl_type = new BMap.MapTypeControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});</p>
<p>? ? ?map.addControl(ctrl_type);</p>
<p>4、启用地图一些事件</p>
<p>? ? map.enableDragging();//启用地图拖拽事件,默认启用(可不写)</p>
<p>? ? ? ?// map.enableScrollWheelZoom();//启用地图滚轮放大缩小</p>
<p>? ? ? ? map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)</p>
<p>? ? ? ? map.enableKeyboard();//启用键盘上下左右键移动地图</p>
<p>5、本地搜索服务</p>
<p>? ?var localSearch=new BMap.LocalSearch(map,{renderOptions:{map:map,panel:"results"}})</p>
<p>? ? ocalSearch.search("崇文门");搜索崇文门</p>
<p>? ?LocalSearch有两个构造参数,第一个代表搜索的区域,可以是map、point、或者是字符串如:“北京”,renderOptions是搜索后的结果呈现方式.</p>
<p>? ?renderOptions提供了多种展现方式,详细见用户手册</p>
<p>6、周边搜索,对某一个地点附近进行搜索</p>
<p>? ? var localSearch=new BMap.LocalSearch(map,{renderOptions:{map:map,panel:"results"}})</p>
<p>? ? localSearch.searchNearby("银行","中关村");</p>
<p>7、范围搜索,地图提供的视野范围内进行搜索</p>
<p>? ? var localSearch=new BMap.LocalSearch(map,{renderOptions:{map:map}})</p>
<p>? ? localSearch.searchInBounds("银行",map.getBounds());</p>
<p>?</p>
<p>8、公交导航</p>
<p>? 在搜索之前,需要指定搜索区域,搜索区域只能是市不能是省,如果搜索区域是BMap.Map对象则搜索路线会自动显示在地图上</p>
<p>? var train = new BMap.TransitRoute(map,{readerOptions:{map:map}});</p>
<p>? ?train.search("国贸","中关村");</p>
<p>?</p>
<p>9、驾车导航,与公交导航不同,搜索范围可以设置为省</p>
<p>? ?var driv = new BMap.DrivingRoute(map,{map:map,autoViewport:true});</p>
<p>? ?driv.search("中关村","上地");</p>
<p>10、参考资料:</p>
<p>? ?百度API开发指南:http://dev.baidu.com/wiki/map/index.php?title=%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97</p>
<p>? ?类参考:http://dev.baidu.com/wiki/map/index.php?title=%E7%B1%BB%E5%8F%82%E8%80%83</p>
<p>11、程序实例下载</p>
<p>? ?ftp://192.168.100.253/liubx/map</p>
<div><br></div>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics