0
동적 인 콘텐츠로 Google InfoWindow를 채우는 데 어려움을 겪고 있습니다. 내 계획은 많은 마커 (60 개)를로드하고 각 마커에 클릭 이벤트 처리기를 첨부하는 것입니다. 각 마커를 클릭하면 고유 한 ID 열을 기반으로 융합 테이블에서 해당 데이터를 가져 오려고합니다. 간단히 말해서 각 마커는 서로 다른 데이터를 가지고 있습니다. 두 마커는 각각의 infowWindow에로드 된 동일한 데이터 세트를 갖지 않습니다. 나는 클로저에 대해 읽었지만,이 개념을이 문제에 정확하게 적용하는 것처럼 보이지 않아서 여기에서 제안을 찾고있다.동적으로 여러 마커로 정보창을 채우는 중
var markers = new Array();
infoWindow = new google.maps.InfoWindow();
function getBeachLocations() {
// construct query
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = "&key=apiKey=?";
var query = "SELECT * FROM beachLocationTable"; // beach locations tbl
var queryText = encodeURI(query);
$.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp',
success: createMarkers,
error: function() {
alert("Sorry, no spatial data is available at this time, please check back on a later date.");
}
});
} //end getBeachLocations
function createMarkers(data) {
url = "swim.jpg";
var rows = data['rows'];
for (var m in rows) {
var ecoli_array = new Array();
var marker = new google.maps.Marker({
map: map,
icon: new google.maps.MarkerImage(url),
beach_id: rows[m][0],
beach_name: rows[m][1],
beach_region: rows[m][2],
position: new google.maps.LatLng(rows[m][4], rows[m][5]),
idx: m,
getEcoliData: function() {
var obj;
var ecoli_rows_str = "";
obj = getEcoliData(marker.beach_id);
obj.success(function (data) {
var rows;
rows = data['rows'];
});
for (var i = 0; i < rows.length; i++) {
console.log(rows[i]);
ecoli_rows_str += '<tr><td>' + rows[i][2] + '</td><td>' + rows[i][3] + '</td><td>' + rows[i][4] + '</td></tr>';
}
return ecoli_rows_str;
} // end getEcoliData
}); // end marker
google.maps.event.addListener(marker, 'click', (function (marker) {
return function() {
infoWindow.setContent("ID is " + this.beach_id + "</br>Beach Name is: " + this.getEcoliData());
infoWindow.open(map, this);
}
})(marker));
} // end for loop
} //end function createMarkers
function getEcoliData(beach_id) {
console.log(beach_id);
var rows;
var queryURL = "https://www.googleapis.com/fusiontables/v1/query?sql=";
var queryTail = '&key=apiKey=?';
var whereClause = "WHERE 'Beach_ID' = " + beach_id;
var query = "SELECT * FROM ecoliTable "
+ whereClause + " ORDER BY 'Sample_Date' DESC";
var queryText = encodeURI(query);
var ecoli_array = new Array();
return $.ajax({
type: "GET",
url: queryURL + queryText + queryTail,
cache: false,
dataType: 'jsonp'
});
}
// create beach locations dropdown
function createDropDownMenu() {
var query = 'SELECT Beach_Location, COUNT() FROM beachLocationTable GROUP BY Beach_Location ORDER BY Beach_Location ASC';
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//Send query and draw table with data in response
gvizQuery.send(function (response) {
var numRows = response.getDataTable().getNumberOfRows();
var numCols = response.getDataTable().getNumberOfColumns();
var name = ['<label style="font-weight:bolder;font-size:16px"> Select a Beach:</label><select id="beach_menu" style="font-size:16px;" onchange="select_beach(this.options[this.selectedIndex].value);"><option class="defaultopt" value="">--All--</option>'];
for (var i = 0; i < numRows; i++) {
var nameValue = response.getDataTable().getValue(i, 0);
name.push("<option value=" + "'" + nameValue + "'" + ">" + nameValue + "</option>");
}
name.push('</select>');
document.getElementById('beach_location_dropdown').innerHTML = name.join('');
});
} // end createDropDownMenu Function
/* start map initialization */
function initialize() {
// map
latlng = new google.maps.LatLng(49.894634, -97.119141);
var myOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// invocation begins here
createDropDownMenu(); // not working now.
getBeachLocations();
// legend
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
document.getElementById('legend'));
var legend = document.getElementById('legend');
var swim_icon = "swim.jpg";
var div = document.createElement('div');
div.innerHTML = '<h4>Features</h4>' +
'<br/><img src="' + swim_icon + '"> ' + "Beaches";
legend.appendChild(div);
} // end initialization function
사용중인 퓨전 테이블이란 무엇입니까? 그것은 어떻게 생겼습니까? – geocodezip
왜 FusionTableLayer를 사용하지 않습니까? 템플릿을 통해 InfoWindow의 내용을 정의 할 수 있습니까? –
필자는 융합 테이블 레이어를 사용하지 않은 마커에 사용자 지정 아이콘 이미지를 사용해야했습니다. 데이터를 쿼리하는 세 개의 테이블이 있습니다. 하나의 표에는 표식과 ID 열에 대한 좌표가 들어 있습니다. 그런 다음이 ID 열을 사용하여 다른 두 테이블을 쿼리합니다. 필요한 경우 테이블 정의를 제공 할 수 있습니다. – Michael