轨迹回放示例
Bigemap軌跡回放示例
編輯時間：2017-07-03
軌跡回放完整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();?????????????????//啟用連續(xù)縮放效果
?????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);?//將標(biāo)記添加到地圖中
????????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);?//將標(biāo)記添加到地圖中
????????blueCar =?new?BMapLib.LuShu(map,?arrPois,?{
??????? defaultContent:?"",?//"從潯陽路到濱江路"
????????autoView:?true,?//是否開啟自動視野調(diào)整，如果開啟那么路書在運動過程中會根據(jù)視野自動調(diào)整
????????icon:?new?BMap.Icon('images/bcar.png',?new?BMap.Size(48,?32),?{ anchor:?newBMap.Size(15,?15) }),
????????speed:?50,
????????landmarkPois: [],
????????enableRotation:?true?//是否設(shè)置marker隨著道路的走向進行旋轉(zhuǎn)
????????});
????????blueCar.start();
????????}
</script>
編輯時間：2017-07-03
軌跡回放完整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();?????????????????//啟用連續(xù)縮放效果
?????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);?//將標(biāo)記添加到地圖中
????????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);?//將標(biāo)記添加到地圖中
????????blueCar =?new?BMapLib.LuShu(map,?arrPois,?{
??????? defaultContent:?"",?//"從潯陽路到濱江路"
????????autoView:?true,?//是否開啟自動視野調(diào)整，如果開啟那么路書在運動過程中會根據(jù)視野自動調(diào)整
????????icon:?new?BMap.Icon('images/bcar.png',?new?BMap.Size(48,?32),?{ anchor:?newBMap.Size(15,?15) }),
????????speed:?50,
????????landmarkPois: [],
????????enableRotation:?true?//是否設(shè)置marker隨著道路的走向進行旋轉(zhuǎn)
????????});
????????blueCar.start();
????????}
</script>
?
總結(jié)
- 上一篇： 看完挺感动的…
- 下一篇： 2010年11月27日~