将 Infowindow 添加到数组标记中，每 5 秒刷新一次 Google 地图答案

【问题标题】：add Infowindow to array markers refreshing every 5 seconds Google map将 Infowindow 添加到数组标记中，每 5 秒刷新一次 Google 地图
【发布时间】：2017-06-04 06:48:20
【问题描述】：

我已按照此示例 (http://jsfiddle.net/upsidown/p646xmcr/) 在我的地图上每 5 秒刷新一次标记的位置。现在我不明白如何使用不同的变量为我拥有的每个标记添加一个信息窗口，更不用说时间和地理位置（或者只是海滩数组的第 5 个元素）。

var map;
var markers = []; // Create a marker array to hold your markers
function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

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

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    //document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

var n = 0;
setInterval(function reloadMarkers() {
  n++;
  var beaches = [
        ['Bondi Beach', 10+n, 10+n, 5],
        ['Coogee Beach', 10-n, 11-n, 5],
        ['Cronulla Beach', 10-n, 12+n, 3],
        ['Manly Beach', 10+n, 13-n, 2],
        ['Maroubra Beach', 10, 14, 1]
    ];
    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {
        markers[i].setMap(null);
    }
    // Reset the markers array
    markers = [];
    // Call set markers to re-add markers
    setMarkers(beaches);

      var infowindow = new google.maps.InfoWindow({
        content: "infowindowstringg"
      });
    marker.addListener('click', function() {
        infowindow.open(map, marker);
      });

}, 5000);

function setMarkers(locations) {
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });
        google.maps.event.addListener(marker, 'click', )
        // Push marker to markers array
        markers.push(marker);
    }
}



initialize();

【问题讨论】：

您的问题中没有添加信息窗口的代码。您尝试过什么（我假设您已经看过documentation on InfoWindows）？你有什么问题？
您的代码显示没有尝试将信息窗口添加到您的地图。有足够的教程和文档可以轻松回答您的问题。
我通过添加 google.maps.event.addListener(marker, 'click', ) 编辑了我的测试无法正常工作，你能告诉我一个教程吗？
您是否检查过第一条评论中的链接？那里的 first 代码示例向您展示了如何做到这一点！
是的，我确实检查过，但这是针对单个标记的，我不明白如何将该示例准确地集成到数组中。

标签： javascript arrays google-maps google-maps-api-3 infowindow

【解决方案1】：

在 SetMarkers() 中定义 infowindow 变量

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

这是 addListener()

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
           infowindow.setContent(beaches[i][0]);
           infowindow.open(map, marker);
        }
    })(marker, i));

工作示例

http://jsfiddle.net/p646xmcr/413/

【讨论】：