更新多個infowindow與間隔

Question

我想更新所有我的infowindows ajax請求後，即使其打開，我使用地圖api v3。我能夠更新我的標記和位置，但不是infoWindow，我也遵循this的方法。你可以在下面查看我的代碼。當前片段也爲每個窗口設置相同的內容，您可以在infowindow打開時檢查它，然後單擊「更新」按鈕。

var locations = [ 
 
    [ 
 
     "New Mermaid", 
 
     36.9079, 
 
     -76.199, 
 
     1, 
 
     "Georgia Mason", 
 
     "", 
 
     "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", 
 
     "coming soon" 
 
    ], 
 
    [ 
 
     "1950 Fish Dish", 
 
     36.87224, 
 
     -76.29518, 
 
     2, 
 
     "Terry Cox-Joseph", 
 
     "Rowena's", 
 
     "758 W. 22nd Street in front of Rowena's", 
 
     "found" 
 
    ], 
 
    [ 
 
     "A Rising Community", 
 
     36.95298, 
 
     -76.25158, 
 
     3, 
 
     "Steven F. Morris", 
 
     "Judy Boone Realty", 
 
     "Norfolk City Library - Pretlow Branch, 9640 Granby St.", 
 
     "coming soon" 
 
    ], 
 
    [ 
 
     "A School Of Fish", 
 
     36.88909, 
 
     -76.26055, 
 
     4, 
 
     "Steven F. Morris", 
 
     "Sandfiddler Pawn Shop", 
 
     "5429 Tidewater Dr.", 
 
     "found" 
 
    ] 
 
    ] 
 
    var markers = []; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 12, 
 
     // center: new google.maps.LatLng(-33.92, 151.25), 
 
     center: new google.maps.LatLng(36.8857, -76.2599), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

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

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
      icon: { 
 
       url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png', 
 
       size: new google.maps.Size(60, 60) 
 
      }, 
 
      map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
      return function() { 
 
       infowindow.setContent(locations[i][0], locations[i][6]); 
 
       infowindow.open(map, marker); 
 
      } 
 
     })(marker, i)); 
 
     markers.push(marker); 
 
    } 
 
    $(document).ready(function() { 
 

 
     function updateMarkers(m) { 
 
      $.each(m, function (i, mkr) { 
 
       pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng()); 
 
       mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png'); 
 
       mkr.setPosition(pos); 
 
       infowindow.setContent('<div>Update:'+locations[i][7]+'</div>');/**/ 
 
      }); 
 
     }; 
 
     $('#update').click(function() { 
 
      updateMarkers(markers); 
 
     }) 
 
    });

#update{ 
 
    font-family:arial; 
 
    background:#fff; 
 
    padding:10px; 
 
    border-radius:5px; 
 
    display:inline-block; 
 
    margin:10px; 
 
    cursor:pointer; 
 
    box-shadow:0 0 3px rgba(0,0,0,.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><a id="update">UPDATE</a> 
 
</div> 
 
    <div id="map" style="width: 500px; height: 400px;"></div> 
 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
</div>

Answer 1

你有4個標記數組，但只有一個信息窗口。因此，當您撥打updateMarkers時，您會循環4次，設置一個infowindow的內容。最終，infowindow只包含數組中最後一項的內容。

然而，在標記click事件偵聽器setContent覆蓋你可能已經在信息窗口設置的任何內容。當您調用updateMarkers時，您還需要刪除該事件偵聽器。

我想說移動標記的點擊事件監聽到它自己的功能，你可以同時調用在最初創建的標記，並且在更新標記。

東西有點更像：

var openMarker; 

function updateInfowindow(marker, content) { 
    marker.addListener('click', (function (marker, content) { 
     return function() { 
      infowindow.setContent(content); 
      infowindow.open(map, marker); 
     } 
    })(marker, content)); 
} 



for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     icon: { 
      url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png', 
      size: new google.maps.Size(60, 60) 
     }, 
     map: map, 
     index: i 
    }); 

    updateInfowindow(marker, locations[i][0] + ', ' + locations[i][6]); 

    marker.addListener('click', function() { 
     openMarker = this.index; 
    }); 

    markers.push(marker); 
} 

$(document).ready(function() { 
    function updateMarkers(m) { 
     $.each(m, function (i, mkr) { 
      pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng()); 
      mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png'); 
      mkr.setPosition(pos); 
      updateInfowindow(mkr, '<div>Update:'+locations[i][7]+'</div>'); 

      if (openMarker == i) { 
       google.maps.event.trigger(mkr, 'click'); 
      } 
     }); 
    }; 
    $('#update').click(function() { 
     updateMarkers(markers); 
    }) 
}); 

更新：你也許可以使用全局變量來跟蹤這些標記的被點擊最後一個。我爲每個標記添加了一個自定義的「索引」屬性。然後，當您更新標記時，請檢查每個標記是否是開放標記。如果是這樣，再次觸發點擊，這應該重新打開infowindow。我認爲這應該工作。