天地图三，地图视野随标记切换，文章末尾给出切换颜色和视野切换的完整代码。

最新推荐文章于 2024-09-23 09:52:35 发布

全栈攻城狮s

最新推荐文章于 2024-09-23 09:52:35 发布

阅读量582

点赞数

分类专栏：天地图专栏文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/adminuis/article/details/129666408

版权

天地图专栏专栏收录该内容

3 篇文章

订阅专栏

该文章展示了如何使用天地图API创建多个标记点并在地图上进行切换，同时实现视野的动态变化。通过非阻塞异步调用来循环播放标记，每次切换删除上一个标记并更新当前选中的标记。此外，还包括自定义地图主题颜色和隐藏水印的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

天地图三，地图视野随标记切换，文章末尾给出切换颜色和视野切换的完整代码。

官方不支持标记点切换，这个地方稍微有点绕，下边是实现的步骤(以下实现是基于第一篇文章的基础)：
1：先将所有的标记点进行一次初始化

		//绘制多个marker。
			function drawTMakers() {
				markers.length = 0;
				if (lnglats.length != 0) {
					var iconurl = 'images/pointOnline.jpg';
					var iconurl1 = 'images/pointOffline.jpg';
					//创建图片对象
					var icon = new T.Icon({
						iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
						iconSize: new T.Point(19, 27),
						iconAnchor: new T.Point(10, 25)
					});
					for (var i = 0; i < lnglats.length; i = i + 1) {
						markers[i] = drawTMaker(lnglats[i], icon);
					}
					//设置数组长度，参考头部定义的公共数据
					vLength = markers.length;
				}
			}


			//往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。
			function drawTMaker(lnglat, icon) {
				var marker = new T.Marker(new T.LngLat(lnglat.L, lnglat.B), {
					icon: icon
				});
				map.addOverLay(marker);
				return marker;
			}

2：使用非阻塞式的异步调用并设置定时器进行标记切换，并记录上一次被切换点的位置，在执行下一次切换时删除上一次标记的marker，
updateMaker()是更改切换标记的marker，可以自定义添加跳动图标。

			//非阻塞循环轮播marker
			async function nonBlockingOperation() {
				return new Promise((resolve) => {
					clearTimeout()
					// 这里使用异步操作，例如异步请求等
					setTimeout(() => {
						console.log('非阻塞方法执行完成');
						if (count === vLength) {
							count = 0
						}
						if (oldi != -1) {
							//删除上次定为点的marker
							map.removeOverLay(oldMarker);
						}
						array = updateMaker(count)
						oldi = array[0]
						oldMarker = array[1]
						count += 1
						resolve();
					}, time);
				});
			}

			//设置变换坐标的时间长度
			setInterval(async () => {
				await nonBlockingOperation();
			}, time);

以下给出自定义地图主题颜色和视野切换的完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="天地图" />
		<title>天地图－地图API－范例－自定义标注图片</title>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的浏览器端key">
			< script src = "libs/jquery.min.js" >
		</script>
		</script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "Microsoft YaHei"

			}

			#mapDiv {
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			var map; //地图对象
			var flag = true; //是否自定义地图主题色
			var mColor = '#0225B7' //地图主题颜色 
			var zoom = 10; //缩放级别
			var markers = []; //markers数组
			//标注点切换相关
			var count = 0 //初始化为0,用于记录循环次数，相当于for循环中的i
			var vLength //记录markers的长度
			var oldi = -1 //记录上次被设置点的下标
			var oldMarker; //记录上次跳动的marker对象
			var time = 3000 //毫秒计
			//坐标列表
			var lnglats = [{
					"B": "23.1",
					"L": "113.3",
					"PName": "1111"
				},
				{
					"B": "23.2",
					"L": "113.4",
					"PName": "2222"
				},
				{
					"B": "22.9",
					"L": "113.1",
					"PName": "3333"
				},
				{
					"B": "23.7",
					"L": "113.8",
					"PName": "第四个点"
				},
				{
					"B": "23.8",
					"L": "113.5",
					"PName": "第五个点"
				},
				{
					"B": "23.3",
					"L": "113.2",
					"PName": "第六个点"
				},
				{
					"B": "23.1",
					"L": "113.7",
					"PName": "7777"
				},
				{
					"B": "23.5",
					"L": "113.3",
					"PName": "8888"
				}
			];

			function onLoad() {
				//初始化地图对象
				map = new T.Map("mapDiv");
				//设置显示地图的中心点和级别
				map.centerAndZoom(new T.LngLat(113.3, 23.1), zoom);
				if (flag) {
					map.setStyle('indigo')
				}
			}


			function updateMaker(count) {
				//创建图片对象
				var icon1 = new T.Icon({
					iconUrl: "images/112.gif",
					iconSize: new T.Point(32, 32),
					iconAnchor: new T.Point(10, 25)
				});
				for (var i = 0; i < markers.length; i++) {
					if (count === i) {
						lnglat = lnglats[i]
						var markerNew = new T.Marker(new T.LngLat(lnglat.L, lnglat.B), {
							icon: icon1
						});
						//map.removeOverLay(markers[i]);
						map.addOverLay(markerNew);
						map.centerAndZoom(new T.LngLat(lnglat.L, lnglat.B), zoom);
						//map.removeOverLay(markerNew)
						return [i, markerNew]
					}
				}

			}


			//绘制多个marker。
			function drawTMakers() {
				markers.length = 0;
				if (lnglats.length != 0) {
					var iconurl = 'images/pointOnline.jpg';
					var iconurl1 = 'images/pointOffline.jpg';
					//创建图片对象
					var icon = new T.Icon({
						iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
						iconSize: new T.Point(19, 27),
						iconAnchor: new T.Point(10, 25)
					});
					for (var i = 0; i < lnglats.length; i = i + 1) {
						markers[i] = drawTMaker(lnglats[i], icon);
					}
					//设置数组长度，参考头部定义的公共数据
					vLength = markers.length;
				}
			}


			//往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。
			function drawTMaker(lnglat, icon) {
				var marker = new T.Marker(new T.LngLat(lnglat.L, lnglat.B), {
					icon: icon
				});
				map.addOverLay(marker);
				return marker;
			}



			//初始化方法
			window.onload = function() {
				onLoad()
				drawTMakers()

				if (flag) {
					// 通过 id 获取元素
					//设置主题色
					let example = document.getElementById("mapDiv");
					example.style.backgroundColor = mColor;
				}
				//隐藏左下角天地图水印logo
				document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none';
			}


			//非阻塞循环轮播marker
			async function nonBlockingOperation() {
				return new Promise((resolve) => {
					clearTimeout()
					// 这里使用异步操作，例如异步请求等
					setTimeout(() => {
						console.log('非阻塞方法执行完成');
						if (count === vLength) {
							count = 0
						}
						if (oldi != -1) {
							//删除上次定为点的marker
							map.removeOverLay(oldMarker);
						}
						array = updateMaker(count)
						oldi = array[0]
						oldMarker = array[1]
						count += 1
						resolve();
					}, time);
				});
			}

			//设置变换坐标的时间长度
			setInterval(async () => {
				await nonBlockingOperation();
			}, time);
		</script>


	</head>
	<body>
		<div id="mapDiv"></div>
		<p>本示例演示如何自定义标注图片。</p>
	</body>
</html>