google 在单独的函数中映射 infowindow.close() 案例

Question

我想在不同的函数中制作信息窗口，因为它包含很多信息。

我有一个全局定义的变量infowindow = new google.maps.InfoWindow({});

当我m trying to close it in the separate function, infowindow.close() method doesn工作时。看不懂，哪里错了？ infowindow对象成功传入函数，导致新的infowindows创建成功

这是完整的代码

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var markers = [];

///////////
///markers initialization
///////////
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.923036, 151.259052);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var num_markers = locations.length;

    //set infowindow global to prevent multiply opening
    var infowindow = new google.maps.InfoWindow({});
    for (var i = 0; i < num_markers; i++) {
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i][1], lng:locations[i][2]},
            map: map,
            id: locations[i][3]
        });

        //here is a special stuff to pass iterator
        google.maps.event.addListener(markers[i], 'click', (function(i,infowindow, map) {
            return function() {
                MakeContent(i,infowindow, map);
            }
        })(i,infowindow, map));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);


function MakeContent(i,infowindow, map){

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru Hop</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

        infowindow.close();
        infowindow = new google.maps.InfoWindow({
           id: markers[i].id,
           content:contentString,
           position:new google.maps.LatLng(locations[i][1],locations[i][2])
        });
        infowindow.open(map, markers[i]);
}

Answer 1

信息窗口是初始化函数的局部信息。使其成为全局的（在任何函数之外定义它）。重用现有的信息窗口可能比重新创建它更简单。

proof of concept jsfiddle

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var markers = [];
var infowindow = new google.maps.InfoWindow({});
///////////
///markers initialization
///////////
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.923036, 151.259052);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var num_markers = locations.length;

    //set infowindow global to prevent multiply opening
    
    for (var i = 0; i < num_markers; i++) {
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i][1], lng:locations[i][2]},
            map: map,
            id: locations[i][3]
        });

        //here is a special stuff to pass iterator
        google.maps.event.addListener(markers[i], 'click', (function(i,infowindow, map) {
            return function() {
                MakeContent(i, map);
            }
        })(i,infowindow, map));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);


function MakeContent(i, map){

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru Hop</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

        infowindow.close();
        infowindow.setMap(null);
        infowindow = new google.maps.InfoWindow({
           id: markers[i].id,
           content:contentString,
           position:new google.maps.LatLng(locations[i][1],locations[i][2])
        });
        infowindow.open(map, markers[i]);
}

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

google 在单独的函数中映射 infowindow.close() 案例

google maps infowindow.close() case in separate function

javascript

google-maps

google-maps-api-3

google-maps-markers