【高德地图开发】鼠标框选点标记，并获取标记信息

原创于 2025-03-11 21:00:00 发布 · 1.5k 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #高德地图 #鼠标框选区域

高德地图专栏收录该内容

1 篇文章

订阅专栏

直接贴代码，自行替换高德的申请的key值

效果图如下，点击右下角区域开始使用MouseTool工具，再次点击取消使用工具
在这里插入图片描述

弹窗显示选中的点标记的附加信息,给选中的点标记设置颜色

代码如下

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
		<style>
			html,
			body,
			#container {
				height: 100%
			}

			#Div_Choose {
				user-select: none;
				font-size: 16px;
				color: #999;
			}

			#Div_Choose.active {
				color: red;
			}
		</style>
		<title>鼠标工具绘制</title>

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
	</head>
	<body>
		<div id='container'></div>
		<div class="input-card" style='width: 24rem;'>
			<div id="Div_Choose" isChoose="false" style="padding: 8px 10px;cursor: pointer;">
				点击开始框选
			</div>
		</div>
		<!-- 
			自行替换高德的key
			自行替换高德的key
			自行替换高德的key
		 -->
		 <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MouseTool"></script>
   
		<script type="text/javascript">
			var map = new AMap.Map('container', {
				zoom: 14
			});

			// 示例点标记经纬度
			var arr_lnglat = [
				[116.397389, 39.915161],
				[116.394728, 39.912067],
				[116.38151, 39.907524],
				[116.394213, 39.896725],
				[116.406744, 39.904693],
				[116.414211, 39.894882],
				[116.373356, 39.922204],
			];

			// 点标记集合
			var List_Marker = [];

			map.on('complete', () => {
				// 循环添加测试点标记
				for (var i = 0; i < arr_lnglat.length; i++) {
					let marker = new AMap.Marker({
						icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
						position: arr_lnglat[i],
						anchor: 'bottom-center',
						label: { content: 'Code_' + i, direction: 'bottom' },
						extData: {
							stationCode: 'Code_' + i
						}
					});
					marker.setMap(map);
					List_Marker.push(marker);
				}
			});

			var 选中的站点编码 = [];

			var mouseTool = new AMap.MouseTool(map);

			mouseTool.on('draw', function(e) {
				// 清除上次选择的点标记
				选中的站点编码 = [];
				for (var i = 0; i < List_Marker.length; i++) {
					List_Marker[i].setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');
				}

				// 本次绘制的方框
				var rectangle = e.obj;
				// 判断选中了哪些点标记
				for (var i = 0; i < List_Marker.length; i++) {

					var tempMark = List_Marker[i];
					var Pos = tempMark.getPosition();
					var lnglat = [Pos.lng, Pos.lat];

					if (rectangle.contains(lnglat)) {
						tempMark.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png');
						选中的站点编码.push(tempMark.getExtData().stationCode);
					}
				}
				alert(选中的站点编码);
				map.remove(e.obj)
			})

			// 框选按钮
			$("#Div_Choose").click(function(e) {
				var isChoose = $(this).hasClass('active');
				if (!isChoose) {
					mouseTool.rectangle({
						fillColor: '#00b0ff',
						strokeColor: '#80d8ff'
						//同Polygon的Option设置
					});
					$(this).addClass('active');
					$(this).html('点击结束框选')
				} else {
					mouseTool.close(true) //关闭，并清除覆盖物
					$(this).removeClass('active');
					$(this).html('点击开始框选')
					for (var i = 0; i < List_Marker.length; i++) {
						List_Marker[i].setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');
					}
				}
			})
		</script>
	</body>
</html>