Question

我希望在ajax请求后更新我的所有infowindows，即使它已打开，我正在使用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个标记的数组，但只有一个infowindow。因此，当您致电updateMarkers时，您循环4次，设置一个infowindow的内容。最后，infowindow只有数组中最后一项的内容。

然而，标记'click事件侦听器中的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);
    })
});

更新：您可以使用全局变量来跟踪最后点击的标记。我为每个标记添加了自定义“索引”属性。然后，当您更新标记时，请检查每个标记以查看它是否为开放标记。如果是这样，再次触发点击，这应该重新打开infowindow。我认为这应该有用。

用间隔更新多个infowindow

1 个答案: