2013-01-14 273 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); 

    } 
相關問題