<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/directionlite/v1/driving?origin=40.01116,116.339303&destination=39.936404,116.452562&ak=CFFvAGC2iFzI5tEPXGUWkGD9NZ5uleIs"></script>
<title>路线规划</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 获取到webview 通过 url 携带的坐标参数
var paramsArr = window.location.search.substring(1).split(',')
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(41.889899, 12.475339), 18);//设置
var lng, lat;
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.clearOverlays();//清除地图上所有覆盖物
lng = r.point.lng
lat = r.point.lat
var p1 = new BMap.Point(lng, lat);
var p2 = new BMap.Point(paramsArr[0], paramsArr[1]);
var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
driving.search(p1, p2);
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
##导航功能 --- 轮循重新规划路线,但是会重置地图的缩放等级。轮循在当前位置创建标记,删除上一个标记
window.setInterval(function () {
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// map.clearOverlays();//清除地图上所有覆盖物
lng = r.point.lng
lat = r.point.lat
//创建标注位置
var pt = new BMap.Point(lng, lat);
var myIcon = new BMap.Icon("../../static/img/Location1.png", new BMap.Size(20, 25), { anchor: new BMap.Size(5, 20), infoWindowAnchor: new BMap.Size(10, 0) });
var marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
//移除上一个标记
map.removeOverlay(allOverlay[3])
map.addOverlay(marker2); //方法向地图中添加单个覆盖物时会触发此事件,将标注添加到地图中
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
var allOverlay = map.getOverlays();
}, 10000)
</script>
输出