Question

我正在创建一个地图，在其中单击标记或复选框将打开或关闭标记信息窗口。多个信息窗口将同时可见。到目前为止，我的代码有效，除了从复选框关闭信息窗口会关闭最后打开的信息窗口，而不是与该复选框的标记相对应的信息窗口。

我怀疑我没有正确使用infowindow.close，我已经尝试过

infowindow.close(marker);  
infowindow.close(markers[i]);  
infowindow.close(this); 
infowindow.close(map,markers[i]);

HTML

<fieldset id="form">
    <p>
    <input class="checkbox" id="Dial-a-Ride" name="Dial-a-Ride" type="checkbox" value="Dial-a-Ride" />
    <label for="Dial-a-Ride">Dial-a-Ride</label>
    </p>
    <p>
    <input class="checkbox" id="American Legion" name="American Legion" type="checkbox" value="American Legion" />
    <label for="American Legion">American Legion</label>
    </p>
    <p>
    <input class="checkbox" id="Veterans of Foreign Wars" name="Veterans of Foreign Wars" type="checkbox" value="Veterans of Foreign Wars" />
    <label for="Veterans of Foreign Wars">Veterans of Foreign Wars</label>
    </p>
    <p>
    <input class="checkbox" id="Nutrition" name="Nutrition" type="checkbox" value="Nutrition" />
    <label for="Nutrition">Nutrition</label>
    </p>
</fieldset>
  <div id="map" style="width: 500px; height: 400px;"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

JS

$(window).load(function(){

   var markers = [];
    var iconSrc = {};

var locations = [
['Boonton Town', '973-402-9410, ext. 631', 'Dial-a-Ride', 40.902, -74.407, 1],
['Whippanong Post', '12-32 Legion Pl.<br>Whippany, NJ 07981', 'American Legion',40.824445559459136, -74.42361831665039,52 ],
['Rockaway Post #9328', '23 Pawnee Ave.<br>Rockaway, NJ 07886', 'Veterans of Foreign Wars', 40.920517319192335, -74.51099395751953,64],
['Roxbury Township', 'Roxbury Senior Center, 72 Eyland Avenue<br>(973) 361-5231; open Wednesday and Friday', 'Nutrition', 40.8563177, -74.637607,79 ]
];

    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(40.7967667, -74.4815438),

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    var marker, i;

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

      marker = new google.maps.Marker({

        position: new google.maps.LatLng(locations[i][3], locations[i][4]),

        map: map,

        icon: iconSrc[locations[i][2]]
      });

      markers.push(marker);

     var infowindow;   

      google.maps.event.addListener(marker, 'click', (function(marker, i) {

        return function() {
            infowindow = new google.maps.InfoWindow();
                    infowindow.setContent(locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]);

        infowindow.open(map,marker);

        }
      })(marker, i));
    }


      function show(category) {

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

          if (locations[i][2] == category) {
  infowindow = new google.maps.InfoWindow();
          infowindow.setContent(locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]);

          infowindow.open(map, markers[i]);

          }
        }
      }


      function hide(category) {

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

          if (locations[i][2] == category) {
 infowindow.close(marker);
          }
        }
      }      
        $(".checkbox").click(function(){

            var cat = $(this).attr("value");        

            // If checked

            if ($(this).is(":checked"))

            {
                show(cat);
            }
            else
            {
                hide(cat);
            }
          });
});

如果您单击复选框1，然后单击复选框2，则相应的信息窗口将打开，取消复选框1，信息窗口2将关闭，因为它是最后一次打开，这是错误的，信息窗口1应该已经关闭。

jsfiddle-http://jsfiddle.net/Verdomde/bdpw89sv/104/

Answer 1

您仅引用单个信息窗口。要一次打开多个信息窗口并关闭它们，您需要保留对所有信息窗口的引用。最简单的方法是将它们附加到关联的标记上。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    if (!this.infowindow)
      this.infowindow = new google.maps.InfoWindow();
    this.infowindow.setContent(locations[i][0] + "<br />" + locations[i][2] + "<br />" + locations[i][1]);

    this.infowindow.open(map, marker);
  }
  })(marker, i));
}

然后在显示和隐藏功能中打开或关闭这些功能。请注意，InfoWindow.close()函数没有任何参数。

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
  for (var i = 0; i < locations.length; i++) {
    if (locations[i][2] == category) {
      if (!markers[i].infowindow)
        markers[i].infowindow = new google.maps.InfoWindow();
      markers[i].infowindow.setContent(locations[i][0] + "<br />" + locations[i][2] + "<br />" + locations[i][1]);
      markers[i].infowindow.open(map, markers[i]);
    }
  }
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
  for (var i = 0; i < locations.length; i++) {
    if (locations[i][2] == category) {
      markers[i].infowindow.close();
    }
  }
}

proof of concept fiddle

代码段：

$(window).load(function() {
  var markers = [];
  var iconSrc = {};
  var locations = [
    ['Boonton Town', '973-402-9410, ext. 631', 'Dial-a-Ride', 40.902, -74.407, 1],
    ['Whippanong Post', '12-32 Legion Pl.<br>Whippany, NJ 07981', 'American Legion', 40.824445559459136, -74.42361831665039, 52],
    ['Rockaway Post #9328', '23 Pawnee Ave.<br>Rockaway, NJ 07886', 'Veterans of Foreign Wars', 40.920517319192335, -74.51099395751953, 64],
    ['Roxbury Township', 'Roxbury Senior Center, 72 Eyland Avenue<br>(973) 361-5231; open Wednesday and Friday', 'Nutrition', 40.8563177, -74.637607, 79],
    ["Dover American Legion", " 2 Legion Pl, Dover, NJ", 'American Legion', 40.882275, -74.56038999999998, 72]
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(40.7967667, -74.4815438),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][3], locations[i][4]),
      map: map
    });
    markers.push(marker);


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        if (!this.infowindow)
          this.infowindow = new google.maps.InfoWindow();
        this.infowindow.setContent(locations[i][0] + "<br />" + locations[i][2] + "<br />" + locations[i][1]);

        this.infowindow.open(map, marker);
      }
    })(marker, i));
  }
  // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][2] == category) {
        if (!markers[i].infowindow)
          markers[i].infowindow = new google.maps.InfoWindow();
        markers[i].infowindow.setContent(locations[i][0] + "<br />" + locations[i][2] + "<br />" + locations[i][1]);
        markers[i].infowindow.open(map, markers[i]);
      }
    }
  }

  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {
    for (var i = 0; i < locations.length; i++) {
      if (locations[i][2] == category) {
        markers[i].infowindow.close(marker);
      }
    }
  }

  $(".checkbox").click(function() {
    var cat = $(this).attr("value");
    // If checked
    if ($(this).is(":checked")) {
      show(cat);
    } else {
      hide(cat);
    }
  });
}); //]]>

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#map {
  height: 60%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset id="form">
  <p>
    <input class="checkbox" id="Dial-a-Ride" name="Dial-a-Ride" type="checkbox" value="Dial-a-Ride" />
    <label for="Dial-a-Ride">Dial-a-Ride</label>
  </p>
  <p>
    <input class="checkbox" id="American Legion" name="American Legion" type="checkbox" value="American Legion" />
    <label for="American Legion">American Legion</label>
  </p>
  <p>
    <input class="checkbox" id="Veterans of Foreign Wars" name="Veterans of Foreign Wars" type="checkbox" value="Veterans of Foreign Wars" />
    <label for="Veterans of Foreign Wars">Veterans of Foreign Wars</label>
  </p>
  <p>
    <input class="checkbox" id="Nutrition" name="Nutrition" type="checkbox" value="Nutrition" />
    <label for="Nutrition">Nutrition</label>
  </p>
</fieldset>
<div id="map" "></div>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript "></script>

多个信息窗口打开，带复选框切换，infowindow.close问题

1 个答案: