背景:
给医院做的一个微信平台,需要用户定位来到达医院目的地。
心情:
一下午困死我了。
一、定位
定位示例在这里: 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,"中心医院");来做公交地铁导航了