[開発]高い道徳的なマップマーカーをマークし、よりダイナミックな情報フォーム(情報ウィンドウ)を達成

情報ポップアップウィンドウ(情報ウィンドウ)に対応するクリックマーカー:以下のように[ターゲット]は、地図情報上にマークAJAXダイナミッククエリデータを介して達成することは、マーカーのロードを複数形成します

[実装コード]

①グローバルなマーカー、および情報ウィンドウを定義します。

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

②書き込み方法マーカーをクリックしてイベント:

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でデータを取得する方法③後?

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);


            	//在地图上显示
	    	});

はい、データを取得した後に操作: - > marker.content、図3に示すように、このメーカーのための追加動的結合事象 - > marker.on( "1、新Aマーカー、2は、動的データは、マーカーに追加され'クリック'(markerClick)」をクリック&marker.emit、{対象:マーカー})。

コアコード:

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});

 

公開された44元の記事 ウォン称賛21 ビュー30000 +

おすすめ

転載: blog.csdn.net/gzyh_tech/article/details/90724828