1、首先成爲百度開發者(注意選擇瀏覽器端和JavascriptAPI)
2、申請祕鑰(如果不想對訪問網址進行限制的話 Referer白名單使用 * )
3、生成軌跡代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地圖軌跡運動</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR KEY"></script>
<style type="text/css">
#allmap {
width: auto;
height: 600px;
border: 1px solid gray;
}
#user1 {
top: 80px;
}
#user2 {
top: 200px;
}
.user-list {
right: 25px;
position: fixed;
border: 1px solid #c0c0c0;
width: 180px;
height: 110px;
background: #fff;
border-radius: 10px;
filter: alpha(Opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
.user-list ul {
list-style-type: none;
padding-left: 10px;
}
.user-list ul li {
padding-bottom: 10px;
}
</style>
</head>
<body>
經度：<input id="lng" type="text" placeholder="輸入地圖經度">
緯度：<input id="lat" type="text" placeholder="輸入地圖緯度" required="">
<button id="addPoint" οnclick="run();">添加軌跡</button><br /><br />
<div id="allmap"></div>
<div id="user1" class="user-list">
<ul>
<li>姓名：張三</li>
<li>職務：3</li>
<li>電話：13552307638</li>
</ul>
</div>
<div id="user2" class="user-list">
<ul>
<li>姓名：李四</li>
<li>職務：3</li>
<li>電話：13552307638</li>
</ul>
</div>
<script type="text/javascript">
//百度地圖API
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.enableScrollWheelZoom(true); //啓動滾輪放大縮小
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
var poinArr = new Array();
poinArr[poinArr.length] = new BMap.Point(106.521436, 29.532288); //起點默認爲重慶
//起點-重慶 106.521436, 29.532288 添加到文本框的幾點座標點（測試）,注意座標點需要有規律些喔！
//終點-西安 108.983569, 34.285675
//終點-北京 116.404449, 39.920423
//終點-瀋陽 123.432790, 41.808644
window.run = function () {
var log = document.getElementById("lng").value; //地圖經度
var lat = document.getElementById("lat").value; //地圖緯度
//根據用戶添加的點動態添加地圖軌跡
poinArr[poinArr.length] = new BMap.Point(log, lat);
map.clearOverlays(); //清除地圖上所有的覆蓋物
var driving = new BMap.DrivingRoute(map); //創建駕車實例
if (poinArr.length > 1) {
for (var i = 1; i < poinArr.length; i++) {
driving.search(poinArr[i - 1], poinArr[i]);
}
}
driving.setSearchCompleteCallback(function () {
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
var m1 = new BMap.Marker(poinArr[0]);
map.addOverlay(m1); //紅標記
lab1 = new BMap.Label("起點", { position: poinArr[0] });
map.addOverlay(lab1); //標記起點
for (var i = 1; i < poinArr.length; i++) {
var m = new BMap.Marker(poinArr[i]);
map.addOverlay(m);
lab = new BMap.Label("終點", { position: poinArr[i] });
map.addOverlay(lab);
}
setTimeout(function () {
map.setViewport(poinArr); //調整到最佳視野
}, 1000);
});
}
</script>
</body>
</html>
