高德地图实现多点标注marker和动态信息窗体

先说一下项目对地图的需求:在后台新增地图管理模块,要求,每一辆车都在地图上有标注,而且点击标注时要显示出车辆的相关信息,比如车牌和车辆的当前状态。

下图就是实现的效果。


当然从高德地图api也能查看到这一块,比如多点标注,简单信息窗体,这些都有api,可以先看官网的,然后,再看我这篇文章,怎么融合一起,记住数据全部来自后台数据库,这样才能保证一切数据都是动态的,可实时更新的。

首先,定义map,渲染出基础的地图。

var map = new AMap.Map('container', {
    resizeEnable: true,   
    zoom: 5
});  

center我就暂时没有定义会自动定位IP的地址获取中心点。接下里需要清除障碍物,全局几个变量,
map.clearMap();  
var markers = []; 
var infoWindow;


好的,接下里开始请求数据,数据主要包括坐标点和信息窗体要展示的参数,比如我的有车辆的运单号和车辆状态,车牌号等参数。

$.ajax({
	url : "eos_TranOrderFollowing/mapcartrans.do",
	type : "get",
	dataType : "json",

	success : function(e) {
		
		// var data=[{"fLong":'112.00003','fLati':'38.2345'},{"fLong":'115.00003','fLati':'38.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];
		// e.data = data;
		var marker;		
		for(var i=0 ; i< e.data.length;i++){
			var jfong=[ e.data[i].fLong,e.data[i].fLati];	
				marker = new AMap.Marker({
			    position: jfong,
			    zIndex: 101,
			    map:map
				});	
				console.log(e.data[3]);	
			marker.setMap(map);	
			marker.orderON=e.data[i].orderON;
			marker.tranOFID=e.data[i].tranOFID;
			marker.fhadd=e.data[i].fhadd;
			marker.sAdd=e.data[i].sAdd;
			marker.status=e.data[i].status;			
			 marker.on('click', function(e){
				
				 infoWindow.setContent("<ul class='main'><li> 运单号: <span style='color:blue'>"+e.target.orderON+"</span></li>" 
				         + "<li>  派车单号: <span style='color:blue'>"+e.target.tranOFID+"  </span></li>" 
				         + "<li>  发货地址: <span style='color:blue'>"+e.target.fhadd+"  </span></li>"
				         + "<li>  收货地址: <span style='color:blue'>"+e.target.sAdd+"  </span></li>"
				         + "<li>  车辆状态 : <span style='color:blue'>"+e.target.status +"  </span></li></ul>");
				 infoWindow.open(map, e.lnglat);
			 });
			
			
		}	// for-end
		
		infoWindow = new AMap.InfoWindow({
			isCustom:	true,
			draggable: true,  //是否可拖动
	        offset: new AMap.Pixel(0, -31),
	        content:""
	    });
		
	}
		

}) //	Ajax结束


因为,我要展示的marker是很多的,后台返回的数据肯定不止1条,所以通过for循环,拿到所有的坐标,我定义的jfong变量,比如我的就有16个坐标点,然后定义marker,把position = jfong;这样就同样可以获得16个marker点了,然后添加标注图标icon,需要自定义图标的看下官网api很简单的。
marker.setMap(map);


这样多点的marker就实现了,接下来就是信息窗体了。因为我们需要在信息窗体展示的动态数据是在success:function(E)里面的,也就是在E里面。而点击图标时,执行的function(e),这个e是高德地图定义的,这里就需要把我们自己的参数赋值到这里面,也就是代码中的   marker.参数名称 = E.data[i].参数名称,通过这样的赋值后,捏可以打印一下(e)看下数据,然后通过e.Target.参数名称   就能够拿到了。信息窗体就不用多说了,把重点的参数赋值说明白就OK啦。我是自定义的信息窗体,通过setContent 动态设置了参数。


毕竟是自定义的信息窗体,所有肯定需要关闭按钮,样式自己随便写,只需要执行关闭自定义信息窗体事件即可

 function closeInfoWindow() {
        map.clearInfoWindow();
    }


好了,这样一个多点标注+动态信息窗体就轻松的实现了。


评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值