<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
}
</style>
</head>
<body onLoad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div>
<input type="button" value="开始" onClick="_CarTrack.start();"/>
<input type="button" value="暂停" onClick="_CarTrack.pause();"/>
<input type="button" value="结束" onClick="_CarTrack.stop();"/>
</div>
</body>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
<script type="text/javascript">
var map;
var drivingRoute;
var zoom = 13;
var _CarTrack;
var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png"; //起点图标
var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png"; //终点图标
function onLoad() {
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.40069, 39.89945), zoom);
map.addControl(TMAP_HYBRID_MAP);
var config = {
policy: 0, //驾车策略
onSearchComplete: searchResult //检索完成后的回调函数
};
drivingRoute = new T.DrivingRoute(map, config);
searchDrivingRoute()
}
function searchDrivingRoute() {
map.clearOverLays();
var startLngLat = new T.LngLat(116.354060,39.905650);
var endLngLat = new T.LngLat(116.428130,39.903550);
//驾车路线搜索
drivingRoute.search(startLngLat, endLngLat);
}
function createRoute(lnglats, lineColor) {
_CarTrack = new T.CarTrack(map, {
interval: 20,
speed: 10,
dynamicLine: true,
Datas: lnglats,
polylinestyle: {color: "#2C64A7", width: 5, opacity: 0.9}
})
}
//添加起始点
function createStartMarker(result) {
var startMarker = new T.Marker(result.getStart(), {
icon: new T.Icon({
iconUrl: startIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
});
map.addOverLay(startMarker);
var endMarker = new T.Marker(result.getEnd(), {
icon: new T.Icon({
iconUrl: endIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
});
map.addOverLay(endMarker);
}
function searchResult(result) {
//添加起始点
createStartMarker(result);
obj = result;
//获取方案个数
var routes = result.getNumPlans();
for (var i = 0; i < routes; i++) {
//获得单条驾车方案结果对象
var plan = result.getPlan(i);
createRoute(plan.getPath());
}
}
</script>
</html>
效果如图。