点击两次相同的标记会打开两个InfoWindows

时间:2016-12-04 17:11:24

标签: javascript google-maps google-maps-api-3 google-maps-markers

我有infowindows工作,但由于某种原因,如果我点击相同的标记多次点击它打开多个相同的infowindow。我觉得它必须与我的代码有关,但我不能完全理解它是什么。任何帮助表示赞赏。

var map;
var markers = [];

function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(33.6894120, -117.9872660),
        mapTypeId: 'roadmap',
        disableDefaultUI: true
    });



    function addMarker(feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map,
            type: feature.type,
            title: feature.title,
            description: feature.description
        });
        marker.addListener('click', function() {
            map.setCenter(marker.getPosition());

            var infoWindow = new google.maps.InfoWindow({
                map: map, 
                pixelOffset: new google.maps.Size(0, -60)
            });
            infoWindow.setContent(marker.description);
            infoWindow.setPosition(marker.position);

            google.maps.event.addListener(map, 'drag', function() {
                infoWindow.close();
            });
            google.maps.event.addListener(map, 'click', function() {
                infoWindow.close();
            });
        });
        markers.push(marker);
    }

    filterMarkers = function(getType) {
        //console.log(getType);
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].type == getType || getType == "") {
                markers[i].setVisible(true);
            } else {
                markers[i].setVisible(false);
            }
        }
    }

    var features = [

        {
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type1',
          description: 'Description1'
        },{
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type2',
          description: 'Description2'
        },{
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type3',
          description: 'Description3'
        }


    ];

    for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
    }
}

$(document).ready(function(){
    initMap();
});

1 个答案:

答案 0 :(得分:0)

您正在为每个标记点击创建一个新的InfoWindow

marker.addListener('click' ... var infoWindow = *new google.maps.InfoWindow( ...*

预计您将获得多个实例。

如果您希望所有标记都有一个InfoWindow,则可以关注this example

如果您希望每个标记都有一个,请查看this SO answer