javascript - 关闭 InfoWindow - 关闭 onclick - Google map

Question

我一辈子都无法在 API V3 中一次只显示一个信息窗口。我需要一个在下一次开放之前关闭。还希望在 map 上的任何地方关闭 infoWindow onclick。这是否在初始化函数中？

这是我的完整脚本:

// defining vars
var map = null;
var markers = [];
var adUnit;
var center = new google.maps.LatLng(39.676502,-105.162101);

// function that soley initializes the new map object
function initialize() {

    var mapOptions = {
        zoom: 10,
        center: center,
            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            },
            zoomControl: true,
                    zoomControlOptions: {
                      style: google.maps.ZoomControlStyle.SMALL,
                      position: google.maps.ControlPosition.LEFT_BOTTOM
                    },
            panControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map($('#map_canvas')[0], mapOptions);
    // call the loader function
    loadXML();

    // Adsense Options                                 
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
      format: google.maps.adsense.AdFormat.BUTTON,
      position: google.maps.ControlPosition.RIGHT_BOTTOM,
      publisherId: 'ca-google-maps_apidocs',
      map: map,
      visible: true
    };
    adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);     

      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });                       


} //<-- Initialize

// load (and map) the markers from XML data
function loadXML() {
    $.get('data.xml', function(data) {
        // var bounds = new google.maps.LatLngBounds();   //<--- Size map to bounds of markers LatLng
        $(data).find('marker').each(function() {

            var lat = $(this).attr('lat')
            var lng = $(this).attr('lng')
            var name = $(this).attr('name')
            var type = $(this).attr('type')

            var LatLng   = new google.maps.LatLng(parseFloat($(this).attr('lat')),
                                    parseFloat($(this).attr('lng')));

            var myToggleData = {                    //<---- collecting data to be toggled on/off
                type      : $(this).attr('type'),
                skill         : $(this).attr('skill'),
                eta_whatever_that_means : parseFloat($(this).attr('eta'))
            }        

            var marker      = new google.maps.Marker({
                position : LatLng,
                map         : map,
                icon     : 'images/marker.png',
                title     : $(this).attr('name'),
                data     : myToggleData
            });

              var html ='<div id="winBackground">          <div class="winTitle">' + name + '</div>          <div class="winHead">Type: <div class="winData">' + type + '</div></div>   </div>';


              // create the infoWindow
              var infoWindow = new google.maps.InfoWindow();
              // add a listener to open the infoWindow when a user clicks on one of the markers
              google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
              });

            markers.push(marker);
            // bounds.extend(LatLng);
        });


        // map.fitBounds(bounds);
    });
}
// The toggleMarker function
function toggleMarkers(attr,val) {
    if (markers){
        for (i in markers) {
            if(markers[i].data[attr] == val){
                var visibility = (markers[i].getVisible() == true) ? false : true;
                markers[i].setVisible(visibility);
            }
        }
    }
}

Answer 1

不要为每个标记都创建一个新的信息窗口。只创建一个 InfoWindow，然后当您更改它时，执行以下操作:

infowin.setContent("");
infowin.open(map, marker);