高德地图marker添加属性、更换icon图标

本文介绍如何在高德地图中为Marker添加自定义属性,包括orderno等,并演示了如何通过点击事件获取这些属性值及更换Marker图标的方法。

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

为高德地图marker添加属性

首先创建marker

	//创建icon
	var icon = new AMap.Icon({
         size: new AMap.Size(25, 34),
         image: '/img/path',
         imageSize: new AMap.Size(20, 40) 
	});
	
	//创建marker
	var marker = new AMap.Marker({
		  position: new AMap.LngLat(longitude, latitude),
		  icon: icon ,
		  map: map
	});
	
	//此时 marker 已经创建好了			

	// 为marker添加点击事件,触发 markerClick 函数
	marker.on('click', markerClick);

为 marker 添加 orderno 属性

marker.orderno = '123456'; // 此处直接用 marker.orderno 即可,如果想添加 content 属性,直接 marker.content

怎么使用添加的 orderno 属性

//以之前设置的 marker 点击事件为例
function markerClick(e) {
	//此处的 e 是关键,这样就可以拿到
	console.log(e.target.orderno);
	//或者这样
	console.log(this.orderno);
}

如何更改已经设置好的marker的icon图标

//假设新的 icon 是 newIcon
//之前设置了 marker 的 icon 图标,可用以下方式更改
marker.setIcon(newIcon);
//如果是在刚刚的点击事件中,可以如下设置:
	function markerClick(e) {
	//此处的 e 是关键,这样就可以拿到
	console.log(e.target.orderno);
	//或者这样
	console.log(***this.orderno***);
	
	//**更改 icon** 
	e.target.setIcon(newIcon);
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SummerGao.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值