【自学笔记】天地图添加标注

最新推荐文章于 2025-04-17 16:32:52 发布

小黑猪hhh

最新推荐文章于 2025-04-17 16:32:52 发布

阅读量6.9k

点赞数 2

分类专栏：天地图

本文链接：https://blog.csdn.net/weixin_46074818/article/details/109450412

版权

天地图专栏收录该内容

7 篇文章

订阅专栏

知识点

MarkTool类：标注工具，用来让用户在地图上标注一个点，可以通过该工具获得用户标点的经纬度位置。
构造函数：MarkTool(map:Map[,opts:MarkToolOptions])。参数说明：map为地图对象；opts：MarkToolOptions类。该类详情可到天地图文档了解

效果图

在这里插入图片描述

html

备注：记得将代码中“您的秘钥”换为你在天地图上申请的秘钥

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的秘钥"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<title></title>
	</head>
	<body onLoad="mapLoad()">
	    <div id="tabMapBox">
	        <div class="tool">
	        	<!-- 点击该图片，视图放大 -->
	            <img src="img/plus.png" alt=""onClick="map.zoomIn()">
	            <!-- 点击该图片，视图缩小 -->
	            <img src="img/reduce.png" alt=""οnclick="map.zoomOut()">
	        </div>
	        <div class="tagbox">
	            <h3>标注工具</h3>
	            <input class="btn1" id="markbtn1" type="button" value="标注"/>
	            <input class="btn2" id="markbtn2" type="button" value="关闭"/>
	            <input class="btn3" id="markbtn3" type="button" value="编辑"/>
	        </div>
	    </div>
	</body>
	<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

css

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html{
	width: 100%;
	height: 100%;
	font-family:"微软雅黑";
}
/*修改为只有tabmap部分的内容*/
#tabMapBox{
	width: 100vw;
	height: 100vh;
}
#tabMapBox .tool{
	position: absolute;
	top: 21px;
	right: 30px;
	width: 60px;
	height: 90px;
	z-index: 9999;
	/*background-color: #1E9FFF;*/
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#tabMapBox .tool img{
	height: 32px;
	width: 32px;
	margin: 5px 0;
}
#tabMapBox .tagbox{
	position: absolute;
	top: 30px;
	right: 90px;
	height: 68px;
	width: 220px;
	padding: 5px 10px;
	z-index: 9999;
	border-radius: 2px;
	background-color: #FFFFFF;
	box-shadow: 0 50px 50px rgba(10, 16, 20, 0.24), 0 0 30px rgba(10, 16, 20, 0.12);
}
#tabMapBox .tagbox h3{
	color: #89867e;
	text-align: center;
	font-weight: 300;
	font-size: 14px;
}
#tabMapBox .tagbox input{
	outline: none;
	padding: 0 5px;
	width: 60px;
	height: 30px;
	border-radius: 2px;
	border: none;
	color: #f5f6fa;
	font-weight: bold;
	box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
				      0 2px 0 -1px rgba(0,0,0,0.13),
				      0 3px 0 -1px rgba(0,0,0,0.08),
				      0 3px 13px -1px rgba(0,0,0,0.21);
}
#tabMapBox .tagbox .btn1{
	background-color: #e74c3c;
}
#tabMapBox .tagbox .btn1:active{
	background-color: #c0392b;
}
#tabMapBox .tagbox .btn1:focus{
	background-color: #f7b731;
}
#tabMapBox .tagbox .btn2{
	background-color: #2ecc71;
	margin: 0 5px;
}
#tabMapBox .tagbox .btn2:active{
	background-color: #27ae60;
}
#tabMapBox .tagbox .btn2:focus{
	background-color: #f7b731;
}
#tabMapBox .tagbox .btn3{
	background-color: #3498db;
}
#tabMapBox .tagbox .btn3:active{
	background-color: #2980b9;
}
#tabMapBox .tagbox .btn3:focus{
	background-color: #f7b731;
}

js

备注：记得将代码中“您的秘钥”换为你在天地图上申请的秘钥

var map,markerTool,zoom = 12,markInfoWin;
function mapLoad() {
	const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
		"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
		"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的秘钥";
	const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
		"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
		"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
		"&tk=您的秘钥";
	//创建自定义图层对象
	const lay1 = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
	const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});
	var config = {layers: [lay1, lay2]};
	map = new T.Map('tabMapBox', config);
	map.centerAndZoom(new T.LngLat(107.353926, 22.404108), zoom);
	
	//禁用双击放大
	map.disableDoubleClickZoom()
	//标注工具对象的图标
	tagicon= new T.Icon({iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png"})
	//创建标注工具对象
	markerTool = new T.MarkTool(map, {icon:tagicon,follow: true});
};
$(function() {
	// 标注按钮(新建)做得事情
	$(".tagbox #markbtn1").click(function () {
		//打开标注工具
		markerTool.open();
		//标注完后不可拖拽
		endeditMarker();
	});
	//标注按钮(关闭)做得事情
	$(".tagbox #markbtn2").click(function () {
		markerTool.close();
		endeditMarker();
	});
	//标注按钮(编辑)做得事情
	$(".tagbox #markbtn3").click(function () {
		editMarker();
	});
});
//使得标注可以拖拽
function endeditMarker() {
	//getMarkers获取所有工具绘制的标注图标。
	var markers = markerTool.getMarkers()
	for (var i = 0; i < markers.length; i++) {
		markers[i].disableDragging();
	}
}
//使得标注不可以拖拽
function editMarker() {
	var markers = markerTool.getMarkers()
	for (var i = 0; i < markers.length; i++) {
		markers[i].enableDragging();
	}
}