百度地圖 秘鑰申請(AK)
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>軌迹回放_路書</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的秘鑰"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script> -->
<script type="text/javascript" src="./js/LuShu_center.js"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#map_canvas{width:100%;height:500px;}
#result {width:100%}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">開始</button>
<button id="stop">停止</button>
<button id="pause">暫停</button>
<script>
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
map.setMapType(BMAP_SATELLITE_MAP);//設定衛星地圖
var lushu;
// 執行個體化一個駕車導航用來生成路線
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
var arrPois =[];
for(var j=0;j<plan.getNumRoutes();j++){
var route = plan.getRoute(j);
arrPois = arrPois.concat(route.getPath());
}
//map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
//map.setViewport(arrPois); //展示整條路線
lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"",//"從天安門到百度大廈"
autoView:true,//是否開啟自動視野調整，如果開啟那麼路書在運動過程中會根據視野自動調整
icon : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 100,
enableRotation:true,//是否設定marker随着道路的走向進行旋轉
landmarkPois: [
{lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
{lng:116.315391,lat:39.964429,html:'高速公路收費<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
{lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
]
});
BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {
var pointsArr = [initPos,targetPos]; //點數組
console.log(pointsArr)
var me = this,
//目前的幀數
currentCount = 0,
//步長，米/秒
timer = 10,
step_p = 45//this._opts.speed / (1000 / timer),
//初始坐标
init_pos = this._projection.lngLatToPoint(initPos),
//擷取結束點的(x,y)坐标
target_pos = this._projection.lngLatToPoint(targetPos),
//總的步長
count = Math.round(me._getDistance(init_pos, target_pos) / step_p);
console.log(step_p)
//畫線
this._map.addOverlay(new BMap.Polyline(pointsArr, {
strokeColor : "#111",
strokeWeight : 5,
strokeOpacity : 0.5
})); // 畫線
if (count < 1) {
me._moveNext(++me.i);
return;
}
me._intervalFlag = setInterval(function() {
//兩點之間目前幀數大于總幀數的時候，則說明已經完成移動
if (currentCount >= count) {
clearInterval(me._intervalFlag);
//移動的點已經超過總的長度
if(me.i > me._path.length){
return;
}
//運作下一個點
me._moveNext(++me.i);
}else {
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
//設定marker
if(currentCount == 1){
var proPos = null;
if(me.i - 1 >= 0){
proPos = me._path[me.i - 1];
}
if(me._opts.enableRotation == true){
me.setRotation(proPos,initPos,targetPos);
}
if(me._opts.autoView){
if(!me._map.getBounds().containsPoint(pos)){
me._map.setCenter(pos);
}
}
}
//正在移動
me._marker.setPosition(pos);
//設定自定義overlay的位置
me._setInfoWin(pos);
}
},timer);
}
}
}
});
var start=new BMap.Point(116.404844,39.911836);
var end=new BMap.Point(116.308102,40.056057);
drv.search(start, end);
//綁定事件
$("run").onclick = function(){
lushu.start();
}
$("stop").onclick = function(){
lushu.stop();
}
$("pause").onclick = function(){
lushu.pause();
}
function $(element){
return document.getElementById(element);
}
</script>
</body>
</html>
效果
lushu案例
![百度秘鑰無效的解決方法 百度未授權使用地圖API, 可能是因為您提供的密 聽語音[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)