2013-01-14 70 views
3

我有InfoWindow的问题。我有一个通过JSON检索数据的ajax函数,但当打开另一个时,我无法自动关闭InfoWindow。 我的代码是这样的:关闭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({ 
    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); 

     }; 
    } 

有谁知道哪里错下降?或者你有什么建议吗?

+2

可能重复[更改谷歌地图再使用单一的信息窗口,而不是创建多个](http://stackoverflow.com/questions/11984258/change-google-maps-to-re-use-single -infowindow-rather-creating-multiple) – geocodezip

+0

http://stackoverflow.com/questions/7796318/google-maps-api-opening-a-single-infowindow也可能是http://stackoverflow.com/questions/2223574/google-maps-auto-close-open-infowindows/8126982#8126982 – geocodezip

+0

没有任何建议可以解决我的问题? – Stefania

回答

9

该建议仅创建一个infowindow(在全局范围内),在点击标记时重新使用它并更改其内容,如果用户单击地图则关闭它。

代码段(消除了对AJAX调用的依赖性):

// 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>

+0

为我工作的唯一解决方案。谢谢你 – raqulka

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

    }; 
} 

应改为

function infoCallback(infowindow, marker) { 
    return function() { 
        //Close active window if exists 
        if(activeWindow != null) 
         activeWindow.close(); 
        //Open new window 
        infowindow.open(map,marker); 
        //Store new window in global variable 
        activeWindow = infowindow; 
    }; 
} 

并声明则activeWindow作为全球变量在您的js文件作为var activeWindow 这应该对你有所帮助

+0

所有人都是最简单,最精彩的解决方案。 –

1

我想我有一个简单的解决方案。我只保存最后一个打开的标记。在下一次点击首先我关闭最后一个标记。

var markers = []; 
var infowindows = []; 

function addMarkes(facilityID) { 

     var bounds = new google.maps.LatLngBounds(); 

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

      var v = variants[i]; 

      var position = new google.maps.LatLng(v.Lat, v.Long); 

      bounds.extend(position); 

      markers[i] = new google.maps.Marker({ 
       position: position, 
       title: v.Title, 
       map: map, 
       animation: google.maps.Animation.DROP, 
       icon: v.Icon, 
       infoWindowIndex: i //synchronize with infoWindows 
      }); 

      var localContent = '<div><span class="address">' + v.Address + '</span></div>'; 

      infowindows[i] = new google.maps.InfoWindow({ 
       content: localContent 
      }); 

      //Just for multiple marks. 
      if (variants.length > 0) { 
       var lastOpen = -1; //Save the last open mark 
       google.maps.event.addListener(markers[i], 'click', function (innerKey) { 
        return function() { 
         //Close the last mark. 
         if (lastOpen > -1) { 
          infowindows[lastOpen].close(); 
         } 
         infowindows[innerKey].open(map, markers[innerKey]); 
         lastOpen = innerKey; 
        } 
       }(i)); 
      } 
     } 

     map.fitBounds(bounds); 

    } 
相关问题