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

最新推荐文章于 2024-10-09 11:35:38 发布

智商不够_熬夜来凑

最新推荐文章于 2024-10-09 11:35:38 发布

阅读量7.8k

点赞数 1

分类专栏：高德地图开发 html 文章标签：高德地图 html js

本文链接：https://blog.csdn.net/gzyh_tech/article/details/90724828

版权

高德地图开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

【目标】实现通过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.parse(data);
            	var listData=jsonObj.data;
            	var markerList=[];
                	for(var i=0;i<listData.length;i++){
                		marker = new AMap.Marker({
                    	    position: new AMap.LngLat(listData[i]['longitude'], listData[i]['latitude']),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    	    title: listData[i]['shortname']
                    	});
                		markerList.push(marker);
                		//信息窗体
                		marker.content = listData[i]['shortname'];
    		    		marker.on('click', markerClick);
    		            marker.emit('click', {target: marker});
                	}

            	map.add(markerList);


            	//在地图上显示
	    	});

没错，在获取数据后的操作就是：1、new 一个 marker，2、动态加入数据到marker中-->marker.content，3、为这个maker动态添加绑定事件-->marker.on("click",markerClick)&marker.emit('click', {target: marker});

核心代码：

marker = new AMap.Marker({
                	    position: new AMap.LngLat(listData['longitude'], listData['latitude']),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                	    title: listData['shortname']
                	});
                	markerList.push(marker);
                	//信息窗体
            		marker.content = listData['shortname'];
		    		marker.on('click', markerClick);
		            marker.emit('click', {target: marker});