<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>? ? ?<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.2&services=true"></script></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>
分享到:
相关推荐
第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示。 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动。 第三步:添加标注。...
可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据,构建功能丰富、交互...百度地图开发步骤是①获取密钥 ②申请新密钥及查看原先申请的密钥 ③开发指
Table of Contents 内容列表Usage 使用说明步骤1:首先将execl文件处理成以下格式,并另存为“.xlsx”格式。注意:第一行必须分别是longitude(经度)和latitude(维度)。步骤2:打开index.html步骤3:将右边的滚动...
2. 由于直接使用微信获取到的经纬度,来使用百度地图api获取地址存在500~1000米的偏差,有时候定位不是很准确,所以需要转换成百度的坐标 参考文档地址:...
利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分(jquery) 重要步骤: 1> 引用百度地图 2> 实例化百度地图,添加相关缩放控件,设置主图 3> 重写http请求,设置...
文章目的 项目开发所需,所以结合百度地图提供的小车平滑轨迹移动,自己写的demo 实现效果 代码下载 下载链接 下面是实现的关键步骤 集成百度地图 ...怎么集成自然是看百度地图...import com.baidu.mapapi.search.rout
作者:花罚,来自原文地址原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接 ...
第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示。 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动。 第三步:添加标注。...
百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的API进行转换。 如果没有开发密钥(key),就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js 腾讯地图官方文档 ...
vue中使用cdn引入高德地图,并在main.js中进行全局配置。(百度上有高德地图引入与配置方法,这里就不详细介绍); 1) npm install vue-amap --save 2) import VueAMap from ‘vue-amap' Vue.use(VueAMap); ...
实现步骤 1、 查询接口 网站上这种类型的接口还不少,笔者直接找了百度地图的接口做,接口文档,调用的API是Geocoding API中的地理编码服务 请求示例:对北京市百度大厦进行地理编码查询 ...