Google Maps API - 打开单个infoWindow [英] Google Maps API - opening a single infoWindow

问题描述

我遵循一个SitePoint教程，将Google Maps API与jQuery集成到我们的网站中，并且我已经将一切工作得很好，只有一个例外：每个新标记打开一个单独的信息窗口，而不关闭前一个。我试图找出如何一次只打开一个窗口。

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

我在这里检查了这个问题：在Google Maps API v3中只有一个InfoWindow打开，但我无法通过在那里找到答案来解决问题（我可能很容易被误解）。

我的代码如下所示：

  $（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（$（sele ctor）[0]，myOptions）; 
 this.bounds = new google.maps.LatLngBounds（）; 
 
 $ b $ MYMAP.placeMarkers =函数（文件名）{
 $ .get（文件名，函数（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}'）; 
  

}）;

赞赏。谢谢

解决方案

您在.each（）循环中创建infowindow。相反，使用该循环创建一个infowindow。然后在您的事件监听器中，每次更新该全局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 =函数（文件名）{
 $ .get（文件名，函数（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）; 
} 
 
函数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}'）; 
  

I'm following a SitePoint tutorial for integrating the Google Maps API into our site with jQuery, and I've got everything working really well, with one exception: each new marker opens a separate info window, without closing the previous one. I'm trying to figure out how to have only one window open at a time.

Here's the tutorial in question: http://www.sitepoint.com/google-maps-api-jquery/

I've checked this question here: Have just one InfoWindow open in Google Maps API v3 but I wasn't able to solve my problem by following the answer there (I could have easily misinterpreted).

My code looks like this:

$(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}');

});

Any help is appreciated. Thanks

解决方案

You're creating the infowindow within your .each() loop. Instead, create one infowindow outwith that loop. Then in your event listener, just update the content of that global infowindow each time.

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

这篇关于Google Maps API - 打开单个infoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！