[Target] achieved via ajax dynamic query data marked on the map information form a plurality of marker loading, as shown below: Click marker corresponding information pop-up window (The InfoWindow)
[Implementation code]
① define the global marker, and a infoWindow:
var marker,infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
② write method a marker click event:
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());
}
Dynamic loading marker and infoWindow after ③ how to obtain data in 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);
//在地图上显示
});
Yes, the operation after the data is acquired: 1, new a marker, 2, dynamic data is added to the marker in -> marker.content, 3, added dynamically binding events for this maker -> marker.on ( " click ", markerClick) & marker.emit ( 'click', {target: marker});
Core code:
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});