87,706
社区成员




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GPX路书浏览</title>
<style type="text/css">
body, html,#map_canvas {width: 100%;height: 100%;border: 0px;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
<script type="text/javascript" src="pts.js"></script>
</head>
<body>
<div id="map_canvas" style="height:96%;"></div>
<button id="Refresh" onclick=window.location.reload()>刷新路径</button>
<script>
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(pts[0],18);
var pts= [new BMap.Point(114.35895873733,36.0684558797412),new BMap.Point(114.355885624729,36.0684212757691),new BMap.Point(114.355855664358,36.0684209380892),...,new BMap.Point(114.225148675683,36.0731252768634)];
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var polyline = new BMap.Polyline(pts, {strokeColor: '#911'});
map.addOverlay( polyline);
map.setViewport(pts);
var myIcon = new BMap.Icon("car.png", new BMap.Size(18,18), {
offset : new BMap.Size(0, 0),
imageOffset : new BMap.Size(0, 0)
});
var carMk = new BMap.Marker(pts[0], {
icon : myIcon
});
map.addOverlay(carMk);
var paths = pts.length;
var i=0;
var Mk1 = new BMap.Marker(pts[0]);
var Mk2 = new BMap.Marker(pts[paths-1]);
Mk1.setLabel(new BMap.Label("起点",{offset:new BMap.Size(-5, -10)}));
Mk2.setLabel(new BMap.Label("终点",{offset:new BMap.Size(-5, -10)}));
map.addOverlay(Mk1);
map.addOverlay(Mk2);
resetMkPoint();
function resetMkPoint() {
i++;
carMk.setPosition(pts[i]);
if (i < paths) {
setTimeout("resetMkPoint()", 100);
};
}
</script>
</body>
</html>