高德地图点击弹窗异步加载

想实现的效果是加载点，每个点对应一定的信息，点击marker弹窗显示对应的信息

$.ajax( {
	        type : "post",
	        url : "simple.do?action=multiquery",
	        data:{
	        	'flag':$(":radio[name='rd']:checked").val(),
	            'province': provinceValue,
	            'city' : city,
	            'scene':scene,
	            'month':month,
	        },
	      	error:function () {
	           alert('服务器请求失败,请重新请求')
	        }, 
	        success : function(data){
	            var dt = JSON.parse(data.resultData);	

	            if(dt.length>0){
	            	var markers = [];
		            var infoWindow = new AMap.InfoWindow();
		            for(var i=0;i<dt.length;i++){
		            	 var marker = new AMap.Marker({
		            		 icon : 'resource/img/red.png',//24px*24px
		                     position: [dt[i].LNG, dt[i].LAT],
		                     offset : new AMap.Pixel(-5,-20),
		                     map:map
		                 });
		            	 marker.content='省份：'+dt[i].PN+'  城市：'+dt[i].CN
		            	 +'<br>RRC连接平均数：'+dt[i].RRC+'<br>下行PRB平均利用率：'+dt[i].PRB
		            	 +'<br>空口下行业务流量：'+dt[i].EP+'<br>时间：'+dt[i].TS
		            	 +'<br>场景：'+dt[i].VN;
	            	    //给Marker绑定单击事件
	            	    marker.on('click',  function(e){
	            		    infoWindow.setContent(e.target.content);
	            		    infoWindow.open(map, e.target.getPosition());
	            		});
	            	    markers.push(marker);
		            }
		            map.setFitView();	
	            }else{
	            	alert('未查询到相关数据');
	            }

	        }
	        
 });

但是因为是一次性查询出了所有点要展示的所有信息，当量大的时候肯定加载速度是不够友好的，并且正常逻辑肯定是：当点击点时触发ajax查询再加载基本信息

优化后的代码：

$.ajax( {
	        type : "post",
	        url : "simple.do?action=multiquery",
	        data:{
	            'province': provinceValue,
	            'city' : city,
	            'scene':scene,
	            'month':month,
	        },
	      	error:function () {
	           alert('服务器请求失败,请重新请求')
	        }, 
	        success : function(data){
	            var dt = JSON.parse(data.resultData);	

	            if(dt.length>0){
	            	var markers = [];
		            var infoWindow = new AMap.InfoWindow();
		            for(var i=0;i<dt.length;i++){
		            	 var marker = new AMap.Marker({
		            	     icon : 'resource/img/red.png',//24px*24px
		                     position: [dt[i].LNG, dt[i].LAT],
		                     offset : new AMap.Pixel(-6,-22),
		                     map:map
		                 });
		            	
		            	marker.content= dt[i].CID;
		            	marker.on('click',mclick);	            
	            	    	markers.push(marker);
		            }
		            map.setFitView();	
	            }else{
	            	alert('未查询到相关数据');
	            }

	        }
	        
 });

对应的异步加载js：

	function mclick(e){
		var month=$('#month').val();
		$.ajax( {
	        type : "post",
	        url : "simple.do?action=getNoSceneInfoByCid",
	        data:{
	            'cid': e.target.content,  
	            'month':month
	        },
	      	error:function () {
	           alert('服务器请求失败,请重新请求')
	        }, 
	        success : function(data){
	            var dt = JSON.parse(data.resultData);	
	            if(dt.length>0){	          
		            var infoWindow = new AMap.InfoWindow();
		            var info='RRC连接平均数：'+dt[0].RRC+'<br>下行PRB平均利用率：'+dt[0].PRB
	            	 +'%<br>空口下行业务流量：'+dt[0].EP; 
		            infoWindow.setContent(info);
        		    infoWindow.open(map, e.target.getPosition());
	            }else{
	            	alert('未查询该小区对应的扩容信息');
	            }
	        }	        
	    });
	}

后记：虽然实现效果前后是一致的，但是异步加载后页面加载速度肯定有提升的