关闭InfoWindow后再打开另一个 [英] close InfoWindow before open another

问题描述

InfoWindow有问题。我有一个通过JSON检索数据的ajax函数，但当打开另一个时，我无法自动关闭InfoWindow。
我的代码是这样的：

  var mapOptions = {
 center：new google.maps.LatLng 44.49423583832911,11.346244544982937），
 zoom：13，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（mappa_locali），mapOptions）; 
 $ .ajax（{
类型：'GET'，
 url：locali_json.php+ urlz，
成功：函数（数据）{
 var json = JSON.parse（data）; 
 for（var i = 0; i< json.length; i ++）{
 point = new google.maps.LatLng（json [i] .latitudine，json [ i] .longitudine）; 
 var infowindow = new google.maps.InfoWindow; 
 infowindow.setContent（'< a href =./ dettaglioLocale.php？id_loc ='+ json [i]。 id_locale +'>'+ json [i] .nome_locale +'< / a>< br>'+ json [i] .address）; 
 addMarkerz（point，infowindow）; 
} 
 
 
 
 
 
函数addMarkerz（point，infowindow）{
 position：point，
 map：map 
}）; 
 google.maps.event.addListener（marker，'mouseover'，infoCallback（infowindow，marker））; 
 markers.push（marker）; 
 infos.push（infowindow）; 
 
 
函数infoCallback（infowindow，marker）{
 return function（）{
 infowindow.close（）; 
 infowindow.open（map，marker）; 
 
}; 
} 
  

有谁知道哪里会减少错误？或者你对我有什么建议？

解决方案

建议只创建一个infowindow（在全局范围内）并在点击标记时更改其内容，如果用户点击地图则关闭它。

代码片段（消除了对AJAX调用的依赖）：

div class =snippetdata-lang =jsdata-hide =false>

  // global variablesvar map; var markers = []; var infowindow = new google.maps.InfoWindow（）; function initialize（）{var mapOptions = {center：new google.maps.LatLng（44.49423583832911,11.346244544982937 ），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（mappa_locali），mapOptions）; var json = JSON.parse（data）; for（var i = 0; i< json.length; i ++）{point = new google.maps.LatLng（json [i] .latitudine，json [i] .longitudine）; < br>< a href =。 '+ json [i] .address; addMarkerz（point，infowindowHtml）; }} function addMarkerz（point，infowindowHtml）{var marker = new google.maps.Marker（{position：point，map：map}）; google.maps.event.addListener（marker，'mouseover'，infoCallback（infowindowHtml，marker））; （）函数infoCallback（infowindowHtml，marker）{return function（）{infowindow.close（）; //在打开它之前更新infowindow的内容infowindow.setContent（infowindowHtml）infowindow.open（map，marker）; };} var data = JSON.stringify（[{latitude：44.494887，longitudinaline：11.3426163，id_locale：0，nome_locale：Bologna，地址：意大利博洛尼亚），{纬度：44.4946615，纵向：11.314634999999953， id_locale：0，nome_locale：Quartiere Saragozza，地址：Quartiere Saragozza，Bologna，Italy}]）; google.maps.event.addDomListener（window，load，initialize）;   
  html，body，＃mappa_locali {height：100％;宽度：100％; margin：0px; < script src =https：//   

I have a problem with InfoWindow. I have an ajax function that retrieves data via JSON, but I can not get close InfoWindow automatically when you open another. My code is this:

var mapOptions = {
    center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa_locali"),mapOptions);
$.ajax({
    type:'GET',
    url:"locali_json.php"+urlz,
    success:function(data){ 
          var json = JSON.parse(data);
          for (var i=0; i<json.length; i++) {
             point = new google.maps.LatLng(json[i].latitudine,json[i].longitudine);
             var infowindow = new google.maps.InfoWindow;
             infowindow.setContent('<a href="./dettaglioLocale.php?id_loc='+json[i].id_locale+'">'+json[i].nome_locale+'</a><br>'+json[i].address);
             addMarkerz(point,infowindow);
          }
    }
})
 }


   function addMarkerz(point,infowindow) { 
    position: point,
    map: map
   });
    google.maps.event.addListener(marker,'mouseover',infoCallback(infowindow, marker));
    markers.push(marker);
    infos.push(infowindow);
     }

    function infoCallback(infowindow, marker) { 
      return function() {
         infowindow.close();  
        infowindow.open(map, marker);

      };
    }

Does anyone know where decreased mistake? Or do you have any advice for me?

解决方案

The suggestion is only create one infowindow (in the global scope), reuse it and change its contents when a marker is clicked, close it if the user clicks on the map.

code snippet (removes the dependency on the AJAX call):

// global variables
var map;
var markers = [];
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("mappa_locali"), mapOptions);
  var json = JSON.parse(data);
  for (var i = 0; i < json.length; i++) {
    point = new google.maps.LatLng(json[i].latitudine, json[i].longitudine);
    var infowindowHtml = '<a href="./dettaglioLocale.php?id_loc=' + json[i].id_locale + '">' + json[i].nome_locale + '</a><br>' + json[i].address;
    addMarkerz(point, infowindowHtml);
  }
}

function addMarkerz(point, infowindowHtml) {
  var marker = new google.maps.Marker({
    position: point,
    map: map
  });
  google.maps.event.addListener(marker, 'mouseover', infoCallback(infowindowHtml, marker));
  markers.push(marker);
}

function infoCallback(infowindowHtml, marker) {
  return function() {
    infowindow.close();
    // update the content of the infowindow before opening it
    infowindow.setContent(infowindowHtml)
    infowindow.open(map, marker);

  };
}


var data = JSON.stringify([{
  latitudine: 44.494887,
  longitudine: 11.3426163,
  id_locale: "0",
  nome_locale: "Bologna",
  address: "Bologna, Italy"
}, {
  latitudine: 44.4946615,
  longitudine: 11.314634999999953,
  id_locale: "0",
  nome_locale: "Quartiere Saragozza",
  address: "Quartiere Saragozza, Bologna, Italy"
}]);


google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mappa_locali"></div>

这篇关于关闭InfoWindow后再打开另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！