百度地图API之定位+公交地铁线路导航

来源：互联网发布：javascript开发框架编辑：程序博客网时间：2024/04/25 20:04

背景：

给医院做的一个微信平台，需要用户定位来到达医院目的地。

心情：

一下午困死我了。

一、定位

定位示例在这里： http://developer.baidu.com/map/jsdemo.htm#i8_1

HTML5对定位的支持在这里：http://www.w3cschool.cc/html/html5-geolocation.html

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);alert('您的位置：'+r.point.lng+','+r.point.lat);}else {alert('failed'+this.getStatus());}        },{enableHighAccuracy: true})//关于状态码//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增)</script>

二、公交地铁线路导航

导航示例在这里：http://developer.baidu.com/map/jsdemo.htm#i4_7

带结果面板： <div id="r-result"></div> 将结果放到这个div元素中

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("l-map");map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result"}});transit.search("王府井", "西单");</script>

</pre></p><p></p><pre class="html" name="code">

三、定位后导航

/** * 浏览器定位代码========================================================================================= */    var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){            var begin = new BMap.Point(parseFloat(r.point.lng),parseFloat(r.point.lat));var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result"}});transit.search(begin,"中心医院");}else {document.getElementById("begin").innerHTML="定位失败，请输入您的位置";}        },{enableHighAccuracy: true})//=================================================================================================

由于终点是确定的（就是中心医院），所以定位用户当前位置即可

定位后，

var begin = new BMap.Point(parseFloat(r.point.lng),parseFloat(r.point.lat));

从而将用户位置转换为百度坐标
就可以 transit.search(begin,"中心医院");来做公交地铁导航了

0 0