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

直接贴代码,自行替换高德的申请的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>
### 集成高德地图实现选点功能 #### 创建高德地图实例初始化 为了在 UniApp 应用程序中集成高德地图以实现选点功能,需先创建高德地图实例。这通常是在 `onMounted` 生命周期钩子函数中完成,在此阶段 Vue 组件已经挂载完毕。 ```javascript import { onMounted } from 'vue'; export default { setup() { let map; onMounted(() => { // 初始化高德地图插件 amapPlugin.init({ key: 'your_amap_key', plugins: ['AMap.Geocoder'] }).then((plugin) => { map = new plugin.AMap.Map('container', { zoom: 15, center: [this.longitude, this.latitude], }); // 添加标记用于表示选中的位置 var marker = new AMap.Marker({ position: new AMap.LngLat(this.longitude, this.latitude), draggable: true }); // 将标记添加至地图上 map.add(marker); // 当拖拽结束时触发事件更新坐标信息 marker.on('dragend', function () { console.log(marker.getPosition()); }); }); }); return {}; } } ``` 上述代码展示了如何利用 `amapPlugin.init()` 方法来加载必要的资源,设置好地图中心点以及缩放级别[^3]。 #### 获取当前位置转换为地址描述 使用 `uni.getLocation` API 可方便地取得设备当前所处地理位置的经纬度数据。之后借助于高德提供的逆地理编码服务可进一步解析出具体的地址字符串供用户查看或者编辑。 ```javascript getAddress() { const that = this; uni.getLocation({ type: 'gcj02',//返回可以用于显示在地图上的坐标 success(res) { that.latitude = res.latitude; that.longitude = res.longitude; uni.request({ url: 'https://restapi.amap.com/v3/geocode/regeo', method: 'GET', data: { location: `${that.longitude},${that.latitude}`, key: 'your_amap_key' }, success(response) { if (response.data.regeocode && response.data.regeocode.formatted_address) { that.addressDescription = response.data.regeocode.formatted_address; } } }) } }); } ``` 这段 JavaScript 函数实现了从获取用户的实时定位到请求对应的中文地址的过程[^2]。 #### 地图交互与选点操作 为了让用户体验更加友好,可以在地图界面上加入一些互动元素比如点击、拖动等手势支持,允许他们自由选取感兴趣的地点作为目的地或起点。当用户选定某个特定区内的兴趣点后,可以通过监听相应的鼠标/触摸事件捕获最新的经度纬度值,同步刷新页面上的表单字段内容以便后续处理。 ```html <template> <!-- ... --> <div id="mapContainer"></div> <!-- 地图容器 --> <input v-model="addressInput" placeholder="请输入地址"/> </template> <script> // ... methods: { handleMarkerDragEnd(event){ const lnglat = event.target.getLngLat(); this.updateLocation(lnglat.lng,lnglat.lat); }, updateLocation(longitude,latitude){ this.getAddressByCoordinates(longitude, latitude).then(address=>{ this.addressInput=address; }); } getAddressByCoordinates(lon,lat){ return new Promise(resolve=>{ uni.request({ url:'https://restapi.amap.com/v3/geocode/regeo', method:"GET", data:{ location:`${lon},${lat}`, key:'your_amap_key' }, success:(res)=>{ resolve(res.data.regeocode.formatted_address); } }); }); } } </script> ``` 在此部分HTML模板定义了一个简单的界面布局,其中包括一个用来承载地图地图容器和一个文本让用户能够看到自己选择的具体位置名称;而JavaScript逻辑则负责响应来自地图控件的各种回调通知,从而保持UI状态的一致性和准确性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值