我为我创建的每个标记都有一个信息窗口...现在如何通过打开另一个信息窗口自动关闭一个信息窗口

时间:2014-09-11 12:55:41

标签: google-maps google-maps-api-3 infowindow

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script type="text/javascript" src="js/markerwithlabel.js"></script>
    <script type="text/javascript">
        function initMap() {
             var latLng = new google.maps.LatLng(-7.178996,115.5241033);
             var homeLatLng = new google.maps.LatLng(-7.178996,115.5241033);

             var map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 2,
               center: latLng,
               mapTypeId: google.maps.MapTypeId.SATELLITE
             });

             var marker1 = new MarkerWithLabel({
               position: new google.maps.LatLng(12.5, 92.75),
               draggable: false,
               raiseOnDrag: false,
               map: map,
               labelContent: "Andaman",
               labelAnchor: new google.maps.Point(22, 0),
               labelClass: "labels", // the CSS class for the label

             });

             var marker2 = new MarkerWithLabel({
               position: new google.maps.LatLng(1.4293648, 114.0550177),
               draggable: false,
               raiseOnDrag: false,
               map: map,
               labelContent: "Borneo",
               labelAnchor: new google.maps.Point(22, 0),
               labelClass: "labels", // the CSS class for the label

             });


var iw1 = new google.maps.InfoWindow({
               content: "<div class='gm'>mycontent</div>"

             });
             var iw2 = new google.maps.InfoWindow({
               content: "<div class='gm'>mycontent</div>"
             });

 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
             google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, this); });
</script>

2 个答案:

答案 0 :(得分:0)

在数组中添加所有这些内容,然后在打开一个窗口循环通过数组并调用每个infowindow的close方法。

所以在代码的开头声明类似

的东西
myWindows = [];

每当你创建新的infoWindow时,都将它添加到这个数组中,所以在你的代码中:

var iw1 = new google.maps.InfoWindow({
    content: "<div class='gm'>mycontent</div>"
});
myWindows.push(iW1);

var iw2 = new google.maps.InfoWindow({
    content: "<div class='gm'>mycontent</div>"
});
myWindows.push(iw2);

无论何时打开新窗口而不是

iw1.open();

你必须关闭所有的IW(你只需要关闭一个,但是在所有这些上调用.close()方法)所以:

for (var i = 0; i < myWindows.length; ++i) {
    myWindows[i].close;
}
iw1.open();

当然,您可以创建功能以打开IW,让您的生活更轻松。

答案 1 :(得分:0)

有一个可重复使用的InfoWindow,如下所示:

// One single re-useable InfoWindow
    infoWindow = new google.maps.InfoWindow();

for(id=0;id<tableids.length;id++){
    layers[id] = new google.maps.FusionTablesLayer({
        map: map,
        suppressInfoWindows: true,
        query: {
            select: 'col2',
            from: tableids[id],
        },
    });

        google.maps.event.addListener(layers[id], 'click', function(e) {
            windowControl(e, infoWindow, map);
        });
}

然后像这样使用它:

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {

// Now build HTML we want in our InfoWindow
var HTML;
    HTML = "<div class='googft-info-window'>";
    HTML+= "<strong>Reference</strong>: " + Ref  + " ";
    HTML+= "<strong>Date</strong>: " + Date + "&nbsp;&nbsp;";

    HTML +="</div>";

    infoWindow.setOptions({
            content: HTML,
            position: e.latLng,
            pixelOffset: e.pixelOffset
    });
    infoWindow.open(map);

}