軌跡回放完整html+js代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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 {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:100%}
</style>
<script type="text/javascript" src="js/apiv.2.0.js"></script>
<!-- 引入路書JS文件 -->
<script type="text/javascript" src="js/LuShu_min.js"></script>
<title>行車路線</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap", {enableMapClick:false});
map.centerAndZoom(new BMap.Point(116.004303, 29.736834), 15);
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。
map.enableKeyboard(); // 啟用鍵盤操作。
map.enableContinuousZoom(); //啟用連續縮放效果
run();
function run() {
//單迎線路軌跡
arrPois = [
new BMap.Point(115.995359, 29.729956),
new BMap.Point(115.995116, 29.731101),
new BMap.Point(115.993688, 29.731069),
new BMap.Point(115.993104, 29.731054),
new BMap.Point(115.992907, 29.731626),
new BMap.Point(115.993455, 29.73194),
new BMap.Point(115.994299, 29.732481),
new BMap.Point(115.995188, 29.733218),
new BMap.Point(115.996167, 29.733806)
];
map.addOverlay(new BMap.Polyline(arrPois, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 }));
map.setViewport(arrPois);
var marker = new BMap.Marker(new BMap.Point(115.995359, 29.729956));
var iconc = new BMap.Icon("images/start.png", new BMap.Size(40, 34));
marker.setIcon(iconc);
map.addOverlay(marker); //將標記添加到地圖中
marker = new BMap.Marker(new BMap.Point(115.996167, 29.733806));
iconc = new BMap.Icon("images/dest.png", new BMap.Size(40, 34));
marker.setIcon(iconc);
map.addOverlay(marker); //將標記添加到地圖中
blueCar = new BMapLib.LuShu(map, arrPois, {
defaultContent: "", //"從潯陽路到濱江路"
autoView: true, //是否開啟自動視野調整，如果開啟那么路書在運動過程中會根據視野自動調整
icon: new BMap.Icon('images/bcar.png', new BMap.Size(48, 32), { anchor: new BMap.Size(15, 15) }),
speed: 50,
landmarkPois: [],
enableRotation: true //是否設置marker隨著道路的走向進行旋轉
});
blueCar.start();
}
</script>
用戶協議 | 隱私條款 | 網站地圖 | 蜀ICP備14013992號-2 |
川公網安備51019002006672
開發者:成都比格圖數據處理有限公司 |
產品名稱：BIGEMAP手機端APP |
版本號：v2.7.0
Copyright ? 1992-2023 成都比格圖數據處理有限公司 版權所有 | Bigemap GIS Office | Bigemap Server | Bigemap APP
在線客服(直接聊)