javascript - 以间隔更新多个信息窗口

Question

我想在 ajax 请求后更新我所有的信息窗口，即使它打开了，我正在使用 map api v3。我可以更新我的标记和位置，但不能更新 infoWindow，我也关注了 this方法也是如此。你可以在下面查看我的代码。当前片段也为每个窗口设置相同的内容，您可以在信息窗口打开时检查它，然后单击“更新”按钮。

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 次，设置一个信息窗口的内容。最终信息窗口只有数组中最后一项的内容。

但是，标记的点击事件监听器中的 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);
    })
});

更新:您或许可以使用一个全局变量来跟踪最后点击了哪个标记。我为每个标记添加了一个自定义的“索引”属性。然后，当您更新标记时，检查每个标记以查看它是否是打开的。如果是这样，再次触发点击，这应该会重新打开信息窗口。我认为这应该可行。