1

我在我的網站上顯示了英國各地的地點列表。 但是,信息窗口顯示每條記錄的相同記錄。我的代碼在下面。任何理由?Google地圖顯示相同信息的信息窗口

var locations = [[52.478899, -1.894055, 'test 1', '87', 'Name: test 1'], 
[52.479474, -1.895946, 'test 2', '88', 'Name: test 2 '], 
[52.477082, -1.893929, 'test 3', '89', 'Name: test 3 ']]; 


function initialize() { 

var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(52.528680, -1.839480), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
var bounds = new google.maps.LatLngBounds(); 


for (var i = 0; i < locations.length; i++) { 
    var curLoc = locations[i]; 
    myLatLng = new google.maps.LatLng(curLoc[0], curLoc[1]); 
    var beachMarker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: curLoc[2], 
     data: curLoc[4], //add content to the Marker-object 
     zIndex: 50 - i 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: curLoc[4] 
    }); 

    google.maps.event.addListener(beachMarker, 'click', (function() { 
     infowindow.setContent(beachMarker.data); 
     infowindow.setPosition(beachMarker.position); 
     infowindow.open(map); 
    })); 

    bounds.extend(myLatLng); 
    map.fitBounds(bounds); 


} 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

更新:我改變了我的代碼,但問題仍然presists但現在點擊標記集中在最後一個標記不只是顯示上一次的標記文本。

下面是一個簡單的URL http://map.projects.webskii.com/default.html

回答

14

我在這些情況下使用的解決方法是一個ID分配給在創建標記。這ID將在回調中可用,以便您可以使用它來按需獲取HTML內容。這裏是:

var locations = [ 
    [52.478899, -1.894055, 'test 1', '87', 'Name: test 1'], 
    [52.479474, -1.895946, 'test 2', '88', 'Name: test 2'], 
    [52.477082, -1.893929, 'test 3', '89', 'Name: test 3'] 
]; 
var map = new google.maps.Map(document.getElementById("map_div"), { 
    center: new google.maps.LatLng(52.528680, -1.839480), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var infoWindow = new google.maps.InfoWindow(); // 2: infoWindow is global 
var markerClickHandler = function() { 
    infoWindow.setContent(locations[this.dataId][4]); // 3: use dataId stored in marker to fetch content from locations array 
    infoWindow.open(map, this); 
}; 
var bounds = new google.maps.LatLngBounds(); 
var i; 
for (i = 0; i < locations.length; i++) { 
    var latlng = new google.maps.LatLng(locations[i][0], locations[i][1]); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: locations[i][2], 
     dataId: i // 1: assign an id 
    }); 
    bounds.extend(latlng); 
    google.maps.event.addListener(marker, "click", markerClickHandler); 
} 
map.fitBounds(bounds); 

Demo here。請注意,也可以將文本/ HTML存儲到標記中,而不是標識。

1

我想它總是顯示最後一個記錄數據?例如infowindow.setContent(curLoc [4]); curLoc始終是數據集位置中的最後一個。

試試這個

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: curLoc[2], 
    data : curLoc[4], //add content to the Marker-object 
    icon: image, 
    zIndex: 50 - i, 
    childMinderId: curLoc[3] 
}); 

...

google.maps.event.addListener(beachMarker, 'click', (function() { 
    infowindow.setContent(beachMarker.data); 
    infowindow.setPosition(beachMarker.position); 
    infowindow.open(map); 
} 
+0

我做了這些改變,但現在我得到了另一個問題。當我點擊地圖上的其中一個圖標時,它會重新定位到地圖上的最後一個記錄,並顯示該信息的infowindow。例如我點擊湯姆,但地圖側重於沙龍並顯示她的窗口。重點是您點擊的圖標之前,但在信息窗口中顯示相同的數據。 –

0

只是一個增編davidkonrad響應。與上次數據彈出相同的問題。如果您使用標記上的數據並使用「this」,它將拾取標記上的數據,並且它是標記對象的位置。

google.maps.event.addListener(beachMarker, 'click', (function() { 
    infowindow.setContent(this.data); 
    infowindow.open(map,this); 
}