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

最新推荐文章于 2022-10-22 16:52:41 发布

兴_业

最新推荐文章于 2022-10-22 16:52:41 发布

阅读量2k

点赞数

分类专栏：百度地图API 文章标签：百度地图 api

本文链接：https://blog.csdn.net/kakarot5/article/details/39995529

版权

百度地图API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景：

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

心情：

一下午困死我了。

一、定位

定位示例在这里： 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,"中心医院");来做公交地铁导航了