用间隔更新多个信息流

Question

我想在ajax请求之后更新我的所有infowindows，即使它打开了，我也使用map v3。我可以更新我的标记和位置，但不是infoWindow，我也遵循了this方法。你可以在下面检查我的代码。当前片段也为每个窗口设置相同的内容，您可以在打开window时检查它，然后单击"Update“按钮。

​

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的内容。最后，in只具有数组中最后一个项的内容。

但是，标记“单击事件侦听器”中的setContent将覆盖您可能在infowindow上设置的任何内容。在调用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);
    })
});

更新：您可能可以使用一个全局变量来跟踪最后单击了哪个标记。我在每个标记中添加了一个自定义的“index”属性。然后，在更新标记时，检查每个标记是否是打开的。如果是的话，再次触发单击，这将重新打开infowindow。我觉得这个应该管用。