首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >谷歌地图应用程序接口v3 ~简单地关闭一个窗口?

谷歌地图应用程序接口v3 ~简单地关闭一个窗口?
EN

Stack Overflow用户
提问于 2010-06-01 06:01:34
回答 7查看 160.8K关注 0票数 61

试图简单地关闭一个infowindow?

我已经有了一个标记数组,所以像这样的东西会很好。谢谢

代码语言:javascript
复制
MyMarkers[i].infowindow.close();
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2010-06-01 13:01:41

使用v3 API,您可以使用InfoWindow.close()方法轻松地关闭InfoWindow。您只需要保留对正在使用的InfoWindow对象的引用。考虑以下示例,它打开一个InfoWindow,并在5秒后将其关闭:

代码语言:javascript
复制
<!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对象的属性:

代码语言:javascript
复制
var marker = new google.maps.Marker({
  position: map.getCenter(),
   map: map
});

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

然后,您将能够打开和关闭该InfoWindow,如下所示:

代码语言:javascript
复制
marker.infowindow.open(map, marker);
marker.infowindow.close();

如果您有一个标记数组,这一点同样适用:

代码语言:javascript
复制
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();
票数 108
EN

Stack Overflow用户

发布于 2012-02-01 04:06:58

我也遇到了类似的问题。我只是将以下代码添加到我的代码中:

代码语言:javascript
复制
closeInfoWindow = function() {
    infoWindow.close();
};

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

完整的js代码是(上面的代码从底部算起大约有15行):

代码语言:javascript
复制
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();
});
票数 7
EN

Stack Overflow用户

发布于 2013-10-31 20:17:18

这也是可行的:

代码语言:javascript
复制
google.maps.event.addListener(marker, 'click', function() {
                if(!marker.open){
                    infowindow.open(map,marker);
                    marker.open = true;
                }
                else{
                    infowindow.close();
                    marker.open = false;
                }
            });

它会在点击时打开一个infoWindow,如果它是打开的,当点击它时将其关闭。

在看过Logan的解决方案后,这两个可以组合成以下两个:

代码语言:javascript
复制
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,当点击并打开它时将其关闭,如果它在地图上的任何地方被点击且infoWindows被打开则关闭它。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2946165

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档