[英]How to center map on marker and open marker's InfoWindow in one method
[英]How to link each Marker with it's own infoWindow?
如您所見,我正在迭代到包含標記信息的json對象,如下所示:
(我也在使用信息框插件,但這與問題無關)
function drawAirports() {
var markers = [];
if ( markers != undefined) {
for (var i = 0; i < markers.length; i++ ) {
markers[i].setMap(null);
}
markers.length = 0;
}
var json = [
{"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"},
{"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"},
{"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"},
{"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"},
{"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"},
{"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"},
{"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"},
{"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"},
{"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"},
{"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"},
{"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"},
{"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"},
{"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"},
{"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"},
{"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"},
{"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"},
{"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"},
{"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"}
];
var airports = eval(json);
for (var i = 0; i < airports.length; i++) {
var airport = airports[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(airport.lat, airport.long),
map: map,
title: airport.airport,
icon: 'img/gmaps/marker.png',
visible: true
});
infobox = new InfoBox({
content: '<h3>'+airport.airport+'</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>',
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-212, -150),
zIndex: null,
boxStyle: {
width: "280px"
},
closeBoxMargin: "0",
closeBoxURL: "img/gmaps/close.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(loc);
});
markers.push(marker);
}
}
我的問題是每個標記打開最后一個(數字17)infowindow,
我究竟做錯了什么?
因此,您的問題不在於Google Maps API利用率或庫,而在於您使用閉包的方式。 你有全局變量infobox
,這很好,因為你只需要一個信息框,並在打開新信息框之前關閉地圖上的任何信息框,但你擁有infobox
的方式始終指向最后創建的信息,即17號,最后一個位置。 只需使用Javascript閉包並在偵聽器代碼中創建信息框,利用airport
因閉合而始終包含正確的數據。 這應該工作:
function drawAirports() {
var markers = [];
var infobox = new InfoBox({
content: '',
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-212, -150),
zIndex: null,
boxStyle: {
width: "280px"
},
closeBoxMargin: "0",
closeBoxURL: "img/gmaps/close.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
if (markers != undefined) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}
var json = [
{"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"},
{"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"},
{"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"},
{"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"},
{"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"},
{"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"},
{"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"},
{"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"},
{"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"},
{"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"},
{"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"},
{"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"},
{"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"},
{"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"},
{"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"},
{"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"},
{"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"},
{"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"}
];
var airports = eval(json);
for (var i = 0; i < airports.length; i++) {
(function (airport) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(airport.lat, airport.long),
map: map,
title: airport.airport,
icon: 'img/gmaps/marker.png',
visible: true
});
google.maps.event.addListener(marker, 'click', function () {
infobox.setContent('<h3>' + airport.airport + '</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>');
infobox.open(map, this);
});
markers.push(marker);
})(airports[i]);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.