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

embedded/2024/11/30 8:53:29/
htmledit_views">

目录

一、功能演示

二、完整代码

三、参考文档


一、功能演示

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

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

二、完整代码

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

html"><!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>

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

三、参考文档

这也只是天地图的一部分功能,更多完整的可以参考官方文档:天地图API 


http://www.ppmy.cn/embedded/141698.html

相关文章

flutter in_app_purchase google支付 PG-GEMF-01错误

问题&#xff1a;PG-GEMF-01错误 flutter 使用in_app_purchase插件升降级订阅时报错PG-GEMF-01。 解决方案&#xff1a; 升降级订阅时&#xff0c;确保不调用 MethodCallHandlerImpl.java文件中的 setObfuscatedAccountId()方法、setObfuscatedProfileId()方法 原因&#xf…

qt QLinearGradient详解

1、概述 QLinearGradient是Qt框架中QGradient的一个子类&#xff0c;用于创建线性渐变效果。线性渐变是一种颜色沿着一条直线平滑过渡到另一种颜色的效果。QLinearGradient允许你定义渐变的起点和终点&#xff0c;以及在这些点之间的颜色变化。你可以使用它来为图形、背景、边…

【计算机网络】核心部分复习

目录 交换机 v.s. 路由器OSI七层更实用的TCP/IP四层TCPUDP 交换机 v.s. 路由器 交换机-MAC地址 链接设备和设备 路由器- IP地址 链接局域网和局域网 OSI七层 物理层&#xff1a;传输设备。原始电信号比特流。数据链路层&#xff1a;代表是交换机。物理地址寻址&#xff0c;交…

【前端开发】小程序无感登录验证

概述 封装的网络请求库&#xff0c;主要用于处理 API 请求并支持自动处理 token 过期 和 token 刷新&#xff0c;适用于需要身份验证的应用场景&#xff0c;特别是在移动端中。 主要功能 自动附加 Token 在每个请求中自动附加 Authorization 头部&#xff0c;使用存储的 acces…

【ChatGPT大模型开发调用】如何获得 OpenAl API Key?

如何获取 OpenAI API Key 获取 OpenAI API Key 主要有以下三种途径&#xff1a; OpenAI 官方平台 (推荐): 开发者用户可以直接在 OpenAI 官方网站 (platform.openai.com) 注册并申请 API Key。 通常&#xff0c;您可以在账户设置或开发者平台的相关页面找到申请入口。 Azure…

什么是JAVA反射??? 常用的API有哪些???怎么获取Class对象.....

目录 引言&#xff1a; 一、获取Class对象的方法 二、使用反射获取构造方法 三、使用反射获成员变量的方法 四、使用反射获成员方法 五.反射的优缺点有哪些? 优点包括: 缺点包括: 总结&#xff1a; 引言&#xff1a; 什么是反射&#xff1a;反射其实我们很早就知晓了…

Linux开发者的CI/CD(11)jenkins变量

文章目录 1. **环境变量 (Environment Variables)**常见的环境变量:示例:2. **构建参数 (Build Parameters)**常见的构建参数类型:示例:3 **在 `stages` 块内定义局部变量**示例:使用 `script` 步骤定义局部变量4 变量引用陷阱在 Jenkins 中,变量是自动化流程中非常重要的…

Vue进阶面试题目(四)

1. 什么是双向绑定? Vue 双向绑定的原理是什么? 双向绑定是一种数据绑定机制&#xff0c;指的是视图和数据之间可以相互同步。即&#xff0c;当模型数据&#xff08;Model&#xff09;发生变化时&#xff0c;视图&#xff08;View&#xff09;会自动更新&#xff1b;反之&am…