如何将每个标记与它自己的infoWindow连接起来？ [英] How to link each Marker with it's own infoWindow?

问题描述

正如你所看到的，我正在迭代到一个包含marker信息的json对象，如下所示：

（我也使用infobox插件，但这与问题无关）

 函数drawAirports（）{
 var markers = []; （标记！=未定义）{
 for（var i = 0; i< markers.length; i ++）{
 markers [i] .setMap（null） ; 
} 
 markers.length = 0; 
} 
 
 var json = [
 {id：8585885，airport：airport name，lat：1.3，long： 1.33}，
 {id：8585886，airport：airport name 1，lat：-1.3，long：1.33}，
 {id ：8585886，airport：airport name 2，lat：42.5000，long：1.5000}，
 {id：8585886，airport：airport name 3 lat：24.0000，long：54.0000}，
 {id：8585886，airport：airport name 4，lat：17.0500，long ：-61.8000}，
 {id：8585886，airport：airport name 5，lat：18.2500，long：-63.1667}，
 {id：8585886，airport：airport name 6，lat：24.0000，long：54.0000}，
 {id：8585886，airport： airport name 7，lat：41.0000，long：20.0000}，
 {id：8585886，airport：airport name 8，lat：40.0000 ，long：45.0000}，
 {id：8585886，airport：airport name 9，lat：12.2500，long：-68.7500}， 
 {id：85858 86，airport：airport name 10，lat：-12.5000，long：18.5000}，
 {id：8585886，airport：airport name 11 lat：35.0000，long：105.0000}，
 {id：8585886，airport：airport name 12，lat：-90.0000，long ：0.0000}，
 {id：8585886，airport：airport name 13，lat：34.0000，long：-64.0000}，
 {id：8585886，airport：airport name 14，lat：-14.3333，long：-170.0000}，
 {id：8585886， ：机场名称15，lat：47.3333，long：13.3333}，
 {id：8585886，airport：airport name 16，lat 机场：机场名称17，纬度：12.5000，长度：-69.9667，长度为133.0000}，
 {id：8585886 } 
]; 
 
 var airports = eval（json）; （var i = 0; i< airports.length; i ++）{
 
 var airport = airports [i]; 
 
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（airport.lat，airport.long），
 map：map，
 title：airport.airport，
图标：'img / gmaps / marker.png'，
 visible：true 
}）; 
 
 infobox = new InfoBox（{
 content：'< h3> + airport.airport +'< / h3>< a class =infohref => Información< / a>< a class =bagshref => Equipajes< / a>'，
 disableAutoPan：false，
 maxWidth：150，
 pixelOffset：new google .maps.Size（-212，-150），
 zIndex：null，
 boxStyle：{
 width：280px
}，
 closeBoxMargin：0 ，
 closeBoxURL：img / gmaps / close.png，
 infoBoxClearance：new google.maps.Size（1，1）
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infobox.open（map，this）; 
 map.panTo（loc）; 
}）; 
 
 markers.push（marker）; 
 
 
 $ / code> 

我的问题是每个标记打开最后一个17）infowindow，



我在做什么错？


解决方案

因此，您的问题不在于Google Maps API的利用率或库，而在于您使用闭包的方式。你有全局变量 infobox ，这很好，因为你只需要一个信息框，并在打开新信息之前关闭地图上的任何信息框，但是你拥有它的方式 infobox 始终指向最后创建的一个，即最后一个位置，即编号17。只需使用Javascript关闭并在侦听器代码内部创建信息框，利用事实 airport 总是包含因关闭而导致的正确数据。这应该工作：

$ p $ function drawAirports（）{
var markers = [];
var infobox = new InfoBox（{
content：''，
disableAutoPan：false，
maxWidth：150，
pixelOffset：new google.maps.Size（ - 212，-150），
zIndex：null，
boxStyle：{
width：280px
}，
closeBoxMargin：0，
closeBoxURL：img / gmaps / close.png，
infoBoxClearance：new google.maps.Size（1，1）
}）; （标记！=未定义）{
for（var i = 0; i< markers.length; i ++）{
markers [i] .setMap（null） ;
}
markers.length = 0;
}

var json = [
{id：8585885，airport：airport name，lat：1.3，long： 1.33}，
{id：8585886，airport：airport name 1，lat：-1.3，long：1.33}，
{id ：8585886，airport：airport name 2，lat：42.5000，long：1.5000}，
{id：8585886，airport：airport name 3 lat：24.0000，long：54.0000}，
{id：8585886，airport：airport name 4，lat：17.0500，long ：-61.8000}，
{id：8585886，airport：airport name 5，lat：18.2500，long：-63.1667}，
{id：8585886，airport：airport name 6，lat：24.0000，long：54.0000}，
{id：8585886，airport： airport name 7，lat：41.0000，long：20.0000}，
{id：8585886，airport：airport name 8，lat：40.0000 ，long：45.0000}，
{id：8585886，airport：airport name 9，lat：12.2500，long：-68.7500}，
{id：8585886，airport： 机场名称10，lat：-12.5000，long：18.5000}，
{id：8585886，airport：airport name 11，lat 35.0000，long：105.0000}，
{id：8585886，airport：airport name 12，lat：-90.0000，long：0.0000} ，
{id：8585886，airport：airport name 13，lat：34.0000，long：-64.0000}，
{id：8585886 ，airport：airport name 14，lat：-14.3333，long：-170.0000}，
{id：8585886，airport：airport name 15 lat：47.3333，long：13.3333}，
{id：8585886，airport：airport name 16，lat：-27.0000，long ：133.0000}，
{id：8585886，airport：airport name 17，lat：12.5000，long：-69.9667}
] ;

var airports = eval（json）;

for（var i = 0; i< airports.length; i ++）{
（function（airport）{

var marker = new google.maps .Marker（{
位置：new google.maps.LatLng（airport.lat，airport.long），
map：地图，
标题：airport.airport，
图标： 'img / gmaps / marker.png'，
visible：true
}）;

google.maps.event.addListener（marker，'click'，function（）{
infobox.setContent（'< h3> + airport.airport +'< / h3>< a class =infohref =>Información< / a>< a class = ）;
infobox.open（map，this）;
}）;

markers.push（marker） ;
}）（机场[i]）;
}
}





As you can see, I'm iterating into a json object containing the markers info, like this:

( I'm also using the infobox plugin, but it's not relevant for the question)

function drawAirports() {
    var markers = [];

    if ( markers != undefined) {
        for (var i = 0; i < markers.length; i++ ) {
            markers[i].setMap(null);
        }
        markers.length = 0;
    }

    var json = [
        {"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"},
        {"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"},
        {"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"},
        {"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"},
        {"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"},
        {"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"},
        {"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"},
        {"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"},
        {"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"},
        {"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"},
        {"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"},
        {"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"},
        {"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"},
        {"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"},
        {"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"},
        {"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"},
        {"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"},
        {"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"}
    ];

    var airports = eval(json);

    for (var i = 0; i < airports.length; i++) {

        var airport = airports[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(airport.lat, airport.long),
            map: map,
            title: airport.airport,
            icon: 'img/gmaps/marker.png',
            visible: true
        });

        infobox = new InfoBox({
             content: '<h3>'+airport.airport+'</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>',
             disableAutoPan: false,
             maxWidth: 150,
             pixelOffset: new google.maps.Size(-212, -150),
             zIndex: null,
             boxStyle: {
                width: "280px"
            },
            closeBoxMargin: "0",
            closeBoxURL: "img/gmaps/close.png",
            infoBoxClearance: new google.maps.Size(1, 1)
        });

        google.maps.event.addListener(marker, 'click', function() {
            infobox.open(map, this);
            map.panTo(loc);
        });

        markers.push(marker);                       
    }
}

My problem is that each marker open the last ( number 17 ) infowindow,

What am I doing wrong?

解决方案

So your problem is not with Google Maps API utilization, or the library, but with the way you use closures. You have global variable infobox, which is fine since you want only one infobox and close any infobox present on map before opening new one, but the way you have it infobox always points to the last one created, which is number 17, the last location. Just use Javascript closure and and create the infobox inside the listener code, leveraging the fact airport always contains the correct data because of the closure. This should work:

function drawAirports() {
  var markers = [];
  var infobox = new InfoBox({
      content: '',
      disableAutoPan: false,
      maxWidth: 150,
      pixelOffset: new google.maps.Size(-212, -150),
      zIndex: null,
      boxStyle: {
          width: "280px"
      },
      closeBoxMargin: "0",
      closeBoxURL: "img/gmaps/close.png",
      infoBoxClearance: new google.maps.Size(1, 1)
  });

  if (markers != undefined) {
      for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
      }
      markers.length = 0;
  }

  var json = [
      {"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"},
      {"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"},
      {"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"},
      {"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"},
      {"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"},
      {"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"},
      {"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"},
      {"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"},
      {"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"},
      {"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"},
      {"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"},
      {"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"},
      {"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"},
      {"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"},
      {"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"},
      {"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"},
      {"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"},
      {"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"}
  ];

  var airports = eval(json);

  for (var i = 0; i < airports.length; i++) {
      (function (airport) {

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(airport.lat, airport.long),
              map: map,
              title: airport.airport,
              icon: 'img/gmaps/marker.png',
              visible: true
          });

          google.maps.event.addListener(marker, 'click', function () {
              infobox.setContent('<h3>' + airport.airport + '</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>');
              infobox.open(map, this);
          });

          markers.push(marker);
      })(airports[i]);
  }
}

这篇关于如何将每个标记与它自己的infoWindow连接起来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！