谷歌地图infowindow.close（）情况下单独的功能 [英] google maps infowindow.close() case in separate function

问题描述

我想在不同的函数中创建infowindow过程，因为它会包含很多信息。

我有一个全局定义的var infowindow = new google.maps.InfoWindow（{}）;

当我 m试图关闭它在单独的函数中，infowindow.close（）方法doesn t起作用。
无法得到，wat在这里是错误的吗？ 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 = []; ///////////// /标记初始化/////////// 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; //设置infowindow全局以防止多次打开var infowindow = new google.maps.InfoWindow（{}）;对于（var i = 0; i  




解决方案

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

概念证明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（{}）; //////////////标记初始化//////// /// 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]}）; //这里是一个特殊的东西来传递迭代器google.maps.event.addListener（markers [i]，'click'，（function（i，infowindow，map）{return function（）{MakeContent（i，map）;} }）（我，infowindow，地图））; }} google.maps.event.addDomListener（window，'load'，initialize）;函数MakeContent（i，map）{var contentString ='< div id =content>'+'< div id = siteNotice>'+'< / div>'+'< h1 id =firstHeadingclass =firstHeading> Uluru< / h1>'+'< div id =bodyContent>'+ '< p>< b> Uluru Hop< / b>也被称为< b> Ayers Rock< / b>是'+'北部的大型'+'砂岩岩层澳大利亚中部地区。它位于距离最近的大镇爱丽丝泉市西南335&160公里（208&160; mi）'+'; 450& 160公里'+'（280&＃160;英里）。卡塔丘塔和乌鲁鲁是乌鲁鲁 - 卡塔丘塔国家公园的两大主要特征。乌鲁鲁对Pitjantjatjara和Yankunytjatjara，这个地区的'+'土着居民是'+'神圣的。它有许多泉水，水洞，'+'岩石洞穴和古代绘画。 < / p>'+'< p>归属地：Uluru，< a href =https://en.wikipedia.org/w/index.php？ title = Uluru& oldid = 297882194>'+'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+'（上次访问时间为2009年6月22日）。< / 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;宽度：500px; margin：0px; < script src =https：//

I want to make infowindow-making process in the different function, cause it`s gonna contains much info.

I have a global-defined var infowindow = new google.maps.InfoWindow({});

when im trying to close it in the separate function, infowindow.close() method doesnt works. Can`t get, wat is wrong here? the infowindow object is successfully passed into the function, cause new infowindows creating successfully

Here is a full code

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]);
}

解决方案

The infowindow is local to the initialize function. Make it global (define it outside of any function). Probably simpler to reuse the existing infowindow than recreate it.

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>

这篇关于谷歌地图infowindow.close（）情况下单独的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！