API bản đồ của Google v3 - Thêm nhiều infowindows

Question

Tôi có một phần đang hoạt động của google maps javascript, tôi đã gặp sự cố.

Bây giờ vấn đề tôi đã có là chỉ có một infowindow được hiển thị, cuối cùng. Tôi tìm thấy một giải pháp trên một thread stack mà làm việc ra ngoài. Nhưng tôi không thể tìm ra lý do tại sao. Tôi khá mới với Javascript vì vậy tôi đã hy vọng một ai đó có thể giải thích cho tôi những gì thay đổi và làm thế nào.

Dưới đây là đoạn code làm việc:

function setMarkers(map, locations){ 
    for(var i = 0; i < locations.length; i++){ 
    var marker = locations[i]; 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var content = locations[i][0]; 
    var infowindow = new google.maps.InfoWindow(); 

    marker = new google.maps.Marker({ 
     position:latLng, 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function(content){ 
     return function(){ 
     infowindow.setContent(content); 
     infowindow.open(map, this); 
     } 
    }(content)); 
    } 
} 

Đây là mã ban đầu bị phá vỡ là (Tôi sẽ dán duy nhất mà thay đổi):

google.maps.event.addListener(marker, 'click', function(){ 
     infowindow.setContent(content); 
     infowindow.open(map, marker); 
    }); 

Bây giờ những gì tôi muốn biết nếu bạn rất tử tế, là:

1. chức năng trả lại fn phân phát và

2. nội dung được thêm vào (content) vào cuối addListener(}(content));) làm theo như tôi thấy nội dung đã được đặt trong thuộc tính setContent.

Cảm ơn!

Answer 1

Đừng vòng lặp của bạn infowindow ...
Bạn chỉ cần một ví dụ của infowindowđối tượng.
Di chuyển nó bên ngoài vòng lặp, tương tự cho các chức năng của bạn.
Bên trong vòng lặp chỉ gán nó là nội dung liên quan đến các nhấp

var locations = [ 
 
    ["Split",  43.5148515, 16.4490835], 
 
    ["Zagreb", 45.840196, 15.9643316], 
 
    ["Dubrovnik", 42.6457256, 18.094058] 
 
]; 
 

 
function initGoogleMap(){ 
 

 
    var infowindow = new google.maps.InfoWindow(); /* SINGLE */ 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
     zoom: 4, 
 
     center: new google.maps.LatLng(45, 15) 
 
    }); 
 
    
 
    function placeMarker(loc) { 
 
    var latLng = new google.maps.LatLng(loc[1], loc[2]); 
 
    var marker = new google.maps.Marker({ 
 
     position : latLng, 
 
     map  : map 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(){ 
 
     infowindow.close(); // Close previously opened infowindow 
 
     infowindow.setContent("<div id='infowindow'>"+ loc[0] +"</div>"); 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 
    
 
    // ITERATE ALL LOCATIONS 
 
    // Don't create functions inside for loops 
 
    // therefore refer to a previously created function 
 
    // and pass your iterating location as argument value: 
 
    for(var i=0; i<locations.length; i++) { 
 
    placeMarker(locations[i]); 
 
    } 
 
    
 
} 
 
google.maps.event.addDomListener(window, 'load', initGoogleMap);

html, body, #map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
#infowindow{ 
 
    padding: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="map-canvas"></div>

Answer 2

for(int i = 0; i < locations.length; i++){ 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var contentString = locations[i][0]; 

    marker = new google.maps.Marker({   
      position: latLng, 
      map: map, 
      contentString: contentString 
    }); 

    var infowindow = new google.maps.InfoWindow({}); 

    marker.addListener('click', function() { 
      infowindow.setContent(this.contentString); 
      infowindow.open(map, this); 
      map.setCenter(this.getPosition()); 
    }); 
} 

này hoạt động tốt đối với tôi

Answer 3

Đối với một số lý do, tôi đã phải sửa đổi đối tượng đánh dấu và truy cập dữ liệu đó bên trong hàm lisener của sự kiện.

Phạm vi fuction sự kiện nhấp chuột trên điểm đánh dấu là đối tượng điểm đánh dấu.

var infowindow = new google.maps.InfoWindow(); 

for(int i = 0; i < locations.length; i++){ 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var contentString = locations[i][0]; 

    marker = new google.maps.Marker({   
      position: latLng, 
      map: map, 
      contentString: contentString 
    }); 
    marker.data = locations[i]; // adds object to marker object 


    marker.addListener('click', function() { 
     // read custom data in this.data 
     infowindow.setContent("<div id='infowindow'>"+ this.data[0] +"</div>"); 

     infowindow.open(map, this); 
     map.setCenter(this.getPosition()); 
    }); 
}