Google Maps API - 打开单个 infoWindow答案

【问题标题】：Google Maps API - opening a single infoWindowGoogle Maps API - 打开单个 infoWindow
【发布时间】：2011-12-09 10:13:50
【问题描述】：

我正在关注使用 jQuery 将 Google Maps API 集成到我们的网站的 SitePoint 教程，并且我的一切工作都非常好，但有一个例外：每个新标记都会打开一个单独的信息窗口，而不会关闭前一个.我试图弄清楚如何一次只打开一个窗口。

这里是有问题的教程：http://www.sitepoint.com/google-maps-api-jquery/

我在这里检查了这个问题：Have just one InfoWindow open in Google Maps API v3，但我无法通过遵循那里的答案来解决我的问题（我可能很容易被误解）。

我的代码如下所示：

$(document).ready(function(){  
  var MYMAP = {
  map: null,
  bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();       
}

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(json){
    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      var arrMarkers = [];
      arrMarkers[i] = marker;
      var infoWindow = new google.maps.InfoWindow({
        content: "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>"
      });

      var arrInfoWindows = [];
      arrInfoWindows[i] = infoWindow;
      google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(MYMAP.map,marker);
      });
    });         
  }, "json");
}

$("#map").css({
  height: 500,
  width: 600
});

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude});
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}');

});

感谢任何帮助。谢谢

【问题讨论】：

标签： jquery google-maps-api-3 infowindow

【解决方案1】：

您正在 .each() 循环中创建信息窗口。相反，在该循环之外创建一个信息窗口。然后在你的事件监听器中，每次只更新那个全局信息窗口的内容。

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();      
}

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(json){
    var infoWindow = new google.maps.InfoWindow({
            content: ""
      }); 

    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      bindInfoWindow(marker, MYMAP.map, infoWindow, "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>");
    });         
  }, "json");
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

$("#map").css({
  height: 500,
  width: 600
});

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude});
MYMAP.init('#map', myLatLng, 11);
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}');

【讨论】：

是的 - 做到了。非常感谢！
作为附录，是否可以在地图初始化时打开其中一个信息窗口？

【解决方案2】：

只创建一个 InfoWindow 对象。您修改后的代码。

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();       
}

MYMAP.placeMarkers = function(filename) {

 var infoWindow = new google.maps.InfoWindow();

  $.get(filename, function(json){
    $.each(json, function(i,loc){
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude),
        map: MYMAP.map,
        title: loc.deal.subject
      });

      var arrMarkers = [];
      arrMarkers[i] = marker;


      google.maps.event.addListener(marker, 'click', function(){
        infoWindow.setContent (
        "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>"
      );
        infoWindow.open(MYMAP.map,marker);
      });
    });         
  }, "json");
}

$("#map").css({
  height: 500,
  width: 600
});

【讨论】：