【天地图】HTML页面实现车辆轨迹、起始点标记和轨迹打点的完整功能

一、功能演示

二、完整代码

三、参考文档

一、功能演示

运行以后完整的效果如下：

点击开始，小车会沿着轨迹进行移动，点击轨迹点会显示经纬度和时间：

二、完整代码

废话不多说，直接给完整代码，替换成自己的KEY，就可以直接看到完整效果了。

<!DOCTYPE html><html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="keywords" content="天地图"/><title>天地图－地图API－范例－车辆轨迹</title><script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=申请的KEY替换" type="text/javascript"></script><script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.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 src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#mapDiv{height:400px;width:100%;}p,input { margin-top: 10px; margin-left: 5px; font-size: 14px;  }</style>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本例演示车辆轨迹</p>
<div ><input type="button" value="开始" onClick="_CarTrack.start();"/><input type="button" value="暂停" onClick="_CarTrack.pause();"/><input type="button" value="结束" onClick="_CarTrack.stop();"/>
</div>
<script>//起点经纬度var startPosition = {time: '2023-12-19 10:28:10',lon: 121.1342347,lat: 32.0551446};//终点经纬度var endPosition = {time: '2023-12-19 10:31:10',lon: 121.1835337,lat: 32.0486566}//轨迹点列表var pointList = [{time: '2023-12-19 10:28:10',lon: 121.1342347,lat: 32.0551446},{time: '2023-12-19 10:28:30',lon: 121.1406307,lat: 32.0553588},{time: '2023-12-19 10:29:10',lon: 121.1475297,lat: 32.0555119},{time: '2023-12-19 10:29:30',lon: 121.1579859,lat: 32.0558791},{time: '2023-12-19 10:29:50',lon: 121.1679751,lat: 32.0563687},{time: '2023-12-19 10:30:10',lon: 121.1820965,lat: 32.0571032},{time: '2023-12-19 10:30:20',lon: 121.1866958,lat: 32.0572256},{time: '2023-12-19 10:30:30',lon: 121.1869832,lat: 32.0557261},{time: '2023-12-19 10:30:40',lon: 121.1869473,lat: 32.0534614},{time: '2023-12-19 10:31:10',lon: 121.1835337,lat: 32.0486566}];var tile = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=申请的KEY替换");var map = new T.Map("mapDiv", {layers: [tile]});map.centerAndZoom(new T.LngLat(121.1342347,32.0551446), 14);var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";	//起点图标var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";		//终点图标var circle;var _CarTrack = new T.CarTrack(map, {interval: 5,speed: 10,dynamicLine: true,polylinestyle: {color: "#2C64A7", weight: 5, opacity: 0.9},Datas: pointList.map(function (obj, i) {var lonLat = new T.LngLat(obj.lon,obj.lat);return lonLat;})})function onLoad() {this.createStartMarker();this.createPointList();this.createEndMarker();}//添加起点function createStartMarker() {var lonLat = new T.LngLat(this.startPosition.lon,this.startPosition.lat)var startMarker = new T.Marker(lonLat, {icon: new T.Icon({iconUrl: startIcon,iconSize: new T.Point(44, 34),iconAnchor: new T.Point(12, 31)})});map.addOverLay(startMarker);};//添加终点function createEndMarker() {var lonLat = new T.LngLat(this.endPosition.lon,this.endPosition.lat)var endMarker = new T.Marker(lonLat, {icon: new T.Icon({iconUrl: endIcon,iconSize: new T.Point(44, 34),iconAnchor: new T.Point(12, 31)})});map.addOverLay(endMarker);}function createPointList(){for(var i = 0 ; i < this.pointList.length ; i++){var point = this.pointList[i];circle = new T.Circle(new T.LngLat(point.lon, point.lat), 50,{color:"orange",weight:5,opacity:0.5,fillColor:"#db1f1f",fillOpacity:0.5,lineStyle:"solid"});map.addOverLay(circle);var content = "经度：" + point.lon + "<br>" +"纬度：" + point.lat + "<br>" +"时间：" + point.time;addClickHandler(content)}};function addClickHandler(content){circle.addEventListener("click",function(e){openInfo(content,e)});};function openInfo(content,e){var point = e.lnglat;circle = new T.Marker(point);// 创建标注var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象map.openInfoWindow(markerInfoWin,point); //开启信息窗口}</script>
</body>
</html>

可以自行修改代码逻辑，把轨迹点都动态替换一下，从后端接口获取就行了。