【高德地图开发】实现多点标注marker和动态信息窗体(InfoWindow)

本文介绍如何使用Ajax动态获取数据并在地图上标注多个marker,实现点击marker弹出相应信息窗体的功能。核心步骤包括定义全局marker和infoWindow,编写marker点击事件,以及在Ajax获取数据后动态加载marker和infoWindow。

【目标】实现通过ajax动态获取数据后在地图上标注多个marker加载信息窗体,如下图所示:点击marker弹出相应信息窗体(InfoWindow)

【实现代码】

①定义全局marker,及一个infoWindow:

 var marker,infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

②写一个marker点击事件的方法:

function markerClick(e) {
	    	//console.log(e);
	    	//var content=e.target.content;
	    	//var str=content.split("<");
	    	//var client=str[0].trim();
	        infoWindow.setContent(e.target.content);
	        infoWindow.open(map, e.target.getPosition());
	    }

③如何在Ajax获取数据后动态加载marker和infoWindow?

Ajax('post', config.requertUrl+"m="+config.getAdd, sendData, function(data){
	    		map.clearMap();
		    	isLoading=false;
	    		var jsonObj=JSON
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

智商不够_熬夜来凑

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

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

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

打赏作者

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

抵扣说明:

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

余额充值