Google Map API v3〜只需closures一个infowindow？
试图简单地closures一个infowindow？
我已经有了一系列的标记，所以这样的事情会很好。 谢谢
MyMarkers[i].infowindow.close(); 使用v3 API ，您可以使用InfoWindow.close()方法轻松closuresInfoWindow 。 您只需要保留对正在使用的InfoWindow对象的引用。 考虑下面的例子，打开一个InfoWindow并在5秒后closures它：
<!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' });
那么你将能够打开和closuresInfoWindow ，如下所示：
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();
或者你可以共享/重复使用同一个infoWindow对象。 看到这个谷歌演示参考。
演示代码相同
var Demo = { map: null, infoWindow: null }; /** * Called when clicking anywhere on the map and closes the info window. */ Demo.closeInfoWindow = function() { Demo.infoWindow.close(); }; /** * Opens the shared info window, anchors it to the specified marker, and * displays the marker's position as its content. */ Demo.openInfoWindow = function(marker) { var markerLatLng = marker.getPosition(); Demo.infoWindow.setContent([ '<b>Marker position is:</b><br/>', markerLatLng.lat(), ', ', markerLatLng.lng() ].join('')); Demo.infoWindow.open(Demo.map, marker); }, /** * Called only once on initial page load to initialize the map. */ Demo.init = function() { // Create single instance of a Google Map. var centerLatLng = new google.maps.LatLng(37.789879, -122.390442); Demo.map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 13, center: centerLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Create a single instance of the InfoWindow object which will be shared // by all Map objects to display information to the user. Demo.infoWindow = new google.maps.InfoWindow(); // Make the info window close when clicking anywhere on the map. google.maps.event.addListener(Demo.map, 'click', Demo.closeInfoWindow); // Add multiple markers in a few random locations around San Francisco. // First random marker var marker1 = new google.maps.Marker({ map: Demo.map, position: centerLatLng }); // Register event listeners to each marker to open a shared info // window displaying the marker's position when clicked or dragged. google.maps.event.addListener(marker1, 'click', function() { Demo.openInfoWindow(marker1); }); // Second random marker var marker2 = new google.maps.Marker({ map: Demo.map, position: new google.maps.LatLng(37.787814,-122.40764), draggable: true }); // Register event listeners to each marker to open a shared info // window displaying the marker's position when clicked or dragged. google.maps.event.addListener(marker2, 'click', function() { Demo.openInfoWindow(marker2); }); // Third random marker var marker3 = new google.maps.Marker({ map: Demo.map, position: new google.maps.LatLng(37.767568,-122.391665), draggable: true }); // Register event listeners to each marker to open a shared info // window displaying the marker's position when clicked or dragged. google.maps.event.addListener(marker3, 'click', function() { Demo.openInfoWindow(marker3); }); }
我有一个类似的问题。 我只是将以下内容添加到我的代码中：
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/langleyhttp://img.dovov.comclose.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(); });
这一个也会工作：
google.maps.event.addListener(marker, 'click', function() { if(!marker.open){ infowindow.open(map,marker); marker.open = true; } else{ infowindow.close(); marker.open = false; } });
点击它将打开一个infoWindow，如果打开它，点击它就closures它。
也看到了Logan的解决scheme，这两个可以结合起来：
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; }); });
当点击它时会打开一个infoWindow，点击它就closures它，并打开它，如果在地图上的任何地方单击并打开infoWindows，closures它。
您可以简单地在创buildInfoWindow的函数内添加一个点击监听器
google.maps.event.addListener(marker, 'click', function() { var infoWindow = createInfoWindowForMarker(marker); infoWindow.open(map, marker); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); });
即使使用多个标记和信息窗口，以下事件侦听器也很好地解决了这个问题：
//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); } });
我们可以使用infowindow.close（map）; 如果您已经使用infowindow = new google.maps.InfoWindow（）;来初始化信息窗口，则closures所有信息窗口。
infowindow.open(null,null);
将closures开放infowindow。 它会和
