Google Map API v3〜只需關閉一個infowindow？

93

隨着v3 API，你可以方便地與InfoWindow.close()方法關閉InfoWindow。您只需要保留對正在使用的InfoWindow對象的引用。請看下面的例子，它開闢了一個InfoWindow和5秒後關閉它：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API InfoWindow Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 500px;"></div> 

    <script type="text/javascript"> 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: new google.maps.LatLng(-25.36388, 131.04492), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
     position: map.getCenter(), 
     map: map 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: 'An InfoWindow' 
    }); 

    infowindow.open(map, marker); 

    setTimeout(function() { infowindow.close(); }, 5000); 
    </script> 
</body> 
</html>

如果您爲每個Marker單獨InfoWindow對象，你可能要考慮加入InfoWindow對象爲您Marker的屬性對象：

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map 
}); 

marker.infowindow = new google.maps.InfoWindow({ 
    content: 'An InfoWindow' 
});

然後，你將能夠打開和關閉該InfoWindow如下：

marker.infowindow.open(map, marker); 
marker.infowindow.close();

這同樣適用，如果你有標記的數組：

var markers = []; 

marker[0] = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map 
}); 

marker[0].infowindow = new google.maps.InfoWindow({ 
    content: 'An InfoWindow' 
}); 

// ... 

marker[0].infowindow.open(map, marker); 
marker[0].infowindow.close();

來源

2010-06-01 05:01:41

+2

+1非常有用，謝謝 – amelvin 2012-10-01 14:37:23

+0

真棒解釋 – 2016-09-14 15:17:54

+0

OOP genious！ ;-）謝謝！這是打開百萬門附加每個/一些/一個標記的特殊信息...並收集它，或改變它，隨時隨地。 1.000感謝這個絕妙的主意！ – 2016-10-12 14:26:26

19

或者你也可以分享/重複使用相同的信息窗口對象。查看此谷歌demo供參考。從演示

相同的代碼

來源

2010-06-14 18:59:15

7

我有一個類似的問題。我只是增加了以下我的代碼：

closeInfoWindow = function() { 
    infoWindow.close(); 
}; 

google.maps.event.addListener(map, 'click', closeInfoWindow);

完整的js代碼是（上面的代碼是從底部約15線）：

jQuery(window).load(function() { 
if (jQuery("#map_canvas").length > 0){ 
    googlemap(); 
} 
}); 

function googlemap() { 

jQuery('#map_canvas').css({'height': '400px'}); 

// Create the map 
// No need to specify zoom and center as we fit the map further down. 
var map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
}); 

// Create the shared infowindow with two DIV placeholders 
// One for a text string, the other for the StreetView panorama. 
var content = document.createElement("div"); 
var title = document.createElement("div"); 
var boxText = document.createElement("div"); 

var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-117,-200) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat" 
      ,opacity: 1 
      ,width: "236px" 
      ,height: "300px" 
     } 
     ,closeBoxMargin: "10px 0px 2px 2px" 
     ,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
}; 


var infoWindow = new InfoBox(myOptions); 
var MarkerImage = siteRoot+'images/house-web-marker.png'; 

// Create the markers 
for (index in markers) addMarker(markers[index]); 
function addMarker(data) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(data.lat, data.lng), 
     map: map, 
     title: data.title, 
     content: data.html, 
     icon: MarkerImage 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infoWindow.open(map, this);   
     title.innerHTML = marker.getTitle(); 
     infoWindow.setContent(marker.content); 
     infoWindow.open(map, marker); 
     jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});    
    }); 
} 

// Zoom and center the map to fit the markers 
// This logic could be conbined with the marker creation. 
// Just keeping it separate for code clarity. 
var bounds = new google.maps.LatLngBounds(); 
for (index in markers) { 
    var data = markers[index]; 
    bounds.extend(new google.maps.LatLng(data.lat, data.lng)); 
} 
map.fitBounds(bounds); 
var origcent = new google.maps.LatLng(map.getCenter()); 
// Handle the DOM ready event to create the StreetView panorama 
// as it can only be created once the DIV inside the infowindow is loaded in the DOM. 

closeInfoWindow = function() { 
     infoWindow.close(); 
    }; 

google.maps.event.addListener(map, 'click', closeInfoWindow); 

google.maps.event.addListener(infoWindow, 'closeclick', function() 
{ 
    centermap(); 
}); 

function centermap() 
{ 
    map.setCenter(map.fitBounds(bounds)); 
} 
} 

jQuery(window).resize(function() { 
googlemap(); 
});

來源

2012-01-31 20:06:57 kdev

+0

似乎在這段代碼中缺少一些東西。結果地圖顯示空的infowindows。 – husayt 2015-03-20 20:49:27

+0

@husayt這是一個非常古老的答案，我確信這種技術在過去的3年中發生了變化。此外，代碼需要根據您自己的目的進行配置。 – kdev 2015-03-23 11:54:54

+0

這工作完美！至少第一個代碼... – Ismaestro 2015-04-10 11:23:43

-2

infowindow.open(null,null);

將關閉信息窗口打開。它將工作一樣

來源

2012-08-31 14:40:25 Janki

+1

相同的是什麼？你忘了完成你的句子嗎？ – 2012-10-04 07:15:09

1

你可以簡單地在地圖上添加一個點擊監聽器，創建信息窗口

google.maps.event.addListener(marker, 'click', function() { 
    var infoWindow = createInfoWindowForMarker(marker); 
    infoWindow.open(map, marker); 
    google.maps.event.addListener(map, 'click', function() { 
     infoWindow.close(); 
    }); 
});

來源

2013-09-04 00:05:36 Logan

3

這一次也將工作在函數內部：

google.maps.event.addListener(marker, 'click', function() { 
       if(!marker.open){ 
        infowindow.open(map,marker); 
        marker.open = true; 
       } 
       else{ 
        infowindow.close(); 
        marker.open = false; 
       } 
      });

將打開點擊它時會顯示一個infoWindow，如果打開它，點擊它就關閉它。

也看過洛根的解決方案，這些可以被組合成這樣：

google.maps.event.addListener(marker, 'click', function() { 
       if(!marker.open){ 
        infowindow.open(map,marker); 
        marker.open = true; 
       } 
       else{ 
        infowindow.close(); 
        marker.open = false; 
       } 
       google.maps.event.addListener(map, 'click', function() { 
        infowindow.close(); 
        marker.open = false; 
       }); 
      });

上點擊它時將打開一個信息窗口，在其上點擊時，在打開時將其關閉，如果關閉它會在地圖上的任何地方點擊並打開infoWindows。

來源

2013-10-31 12:17:18

0

以下事件監聽器解決了這個很好，我使用多個標記和信息窗口，即使：

//Add click event listener 
google.maps.event.addListener(marker, 'click', function() { 
    // Helper to check if the info window is already open 
    google.maps.InfoWindow.prototype.isOpen = function(){ 
     var map = infoWindow.getMap(); 
     return (map !== null && typeof map !== "undefined"); 
    } 
    // Do the check 
    if (infoWindow.isOpen()){ 
    // Close the info window 
    infoWindow.close(); 
    } else { 
    //Set the new content 
    infoWindow.setContent(contentString); 
    //Open the infowindow 
    infoWindow.open(map, marker); 
    } 
});

來源

2015-09-11 11:20:07

0

我們可以使用infowindow.close（圖）如果您已經使用infowindow = new google.maps.InfoWindow（）;來初始化信息窗口，則關閉所有信息窗口。

來源

2017-10-19 12:28:16 Naushad

Google Map API v3〜只需關閉一個infowindow？

回答

相關問題