信息窗口未自动关闭（Google地图）

时间：2015-06-20 21:37:05

标签： javascript html google-maps

我创建了一张地图http://userpages.flemingc.on.ca/~eluli/example3.html 打开图层后，我单击它们以查看InfoWindow。正如您从链接中看到的那样，当我点击另一个图层时，InfoWindows不会自动关闭。

我的JavaScript代码如下。问题在于//弹出窗口。 启用此代码时，我不会遇到上述问题。然而，地图会显示所有图层都已打开（即使在图例中它们未被勾选）。这不是我想要的。我希望初始地图没有图层，以便用户自己可以切换图层。当我点击另一个图层时，InfoWindows会自动关闭。

var map, layer2, layers;
layers = [];
function initialize() {
    var ontario = new google.maps.LatLng(49.2867873, -84.7493416);

var mapOptions = {
        zoom: 5,
        center: ontario,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
    }

    var infoWindow = new google.maps.InfoWindow();
    var openInfoWindow = function (KMLevent) {
        infoWindow.close();
        infoWindow.setOptions(
        {
            content: KMLevent.featureData.infoWindowHtml,
            position: KMLevent.latLng,
            pixelOffset: KMLevent.pixelOffset
        });
        infoWindow.open(map);
    };

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var kmlOptions = {
        suppressInfoWindows: true,  // do not to display an info window when clicked
        preserveViewport: false,
        map: map
    };



  //Layer 0 is NDP       
         layers [0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download',
 {preserveViewport: false, suppressInfoWindows: false});
      //Layer 1 is Liberal    
        layers [1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download',
 {preserveViewport: false, suppressInfoWindows: false});
        //Layer 2 is PC1 
        layers [2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download',
 {preserveViewport: true, suppressInfoWindows: false});
// Layer 3 PC2
        layers [3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download',
 {preserveViewport: true, suppressInfoWindows: false});

        //Layer 4 PC3
        layers [4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download',
 {preserveViewport: true, suppressInfoWindows: false});
        //layer 5 Schools
        layers [5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkVGZ0OW1VZTR0LVE&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

        //layer 6 Company general
        layers [6] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUHRVN0Y4TVdINjg&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

         //layer 7 Company Size
        layers [7] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkM19nVzdENlNIVEk&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

         //layer 8 Company Exports and Revenues
        layers [8] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUXZQOUxQd0UyWDQ&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

         //layer 9 Company New Hires & Growth
        layers [9] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkeHIzZi00M3dHLXc&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

         //layer 10 Company Tax Impact
        layers [10] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vka0NMc1NSbjhyemc&export=download',
 {preserveViewport: false, suppressInfoWindows: false});

  for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }


   // Pop-up window                -- Here is the problem!
   /*layers.forEach(function(url) {
        var layer = new google.maps.KmlLayer(url, kmlOptions);
        layer.setMap(map);
        google.maps.event.addListener(layer, "click", openInfoWindow);

    });*/

}


function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}

//initialize();
google.maps.event.addDomListener(window, 'load', initialize);

我的CSS：

   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
}
   #checkboxes {
  position: absolute;
  top: 30px;
  right: 10px;
  font-family: 'arial', 'sans-serif';
  font-size: 14px;
  background-color: white;
    border-width:2px;   
    border-style:groove;

}

我的HTML：

<div id="checkboxes">
  <input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
  <input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
  <input type="checkbox" id="layer2" onclick="toggleLayer(2);toggleLayer(3);toggleLayer(4);">PC <br>
  <input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools <br>
  <input type="checkbox" id="layer6" onclick="toggleLayer(6)">Company (General) <br>
  <input type="checkbox" id="layer7" onclick="toggleLayer(7)">Company Size <br>
  <input type="checkbox" id="layer8" onclick="toggleLayer(8)">Company Exports & Revenues <br>
  <input type="checkbox" id="layer9" onclick="toggleLayer(9)">Company new Hires & Job Growth <br>
  <input type="checkbox" id="layer10" onclick="toggleLayer(10)">Company Tax Impact
</div>

1 个答案:

答案 0 :(得分：1)

要在单击其他图层时关闭信息窗口，请设置suppressInfowindows:true，然后为调用openInfoWindow功能的每个图层添加一个点击监听器。为所有要使用的层声明一个全局InfoWindow。

for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(null);
    google.maps.event.addListener(layers[i], "click", openInfoWindow);
}

proof of concept fiddle

代码段 

var map, layer2, layers;
layers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  var ontario = new google.maps.LatLng(49.2867873, -84.7493416);

  var mapOptions = {
    zoom: 5,
    center: ontario,
    styles: [{
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#e0efef"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "hue": "#1900ff"
      }, {
        "color": "#c0e8e8"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [{
        "lightness": 100
      }, {
        "visibility": "simplified"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit.line",
      "elementType": "geometry",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 700
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#7dcdcd"
      }]
    }]
  };

  var openInfoWindow = function(KMLevent) {
    infoWindow.close();
    infoWindow.setOptions({
      content: KMLevent.featureData.infoWindowHtml,
      position: KMLevent.latLng,
      pixelOffset: KMLevent.pixelOffset
    });
    infoWindow.open(map);
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var kmlOptions = {
    suppressInfoWindows: true, // do not to display an info window when clicked
    preserveViewport: false,
    map: map
  };



  //Layer 0 is NDP       
  layers[0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });
  //Layer 1 is Liberal    
  layers[1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });
  //Layer 2 is PC1 
  layers[2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download', {
    preserveViewport: true,
    suppressInfoWindows: true
  });
  // Layer 3 PC2
  layers[3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download', {
    preserveViewport: true,
    suppressInfoWindows: true
  });

  //Layer 4 PC3
  layers[4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download', {
    preserveViewport: true,
    suppressInfoWindows: true
  });
  //layer 5 Schools
  layers[5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkVGZ0OW1VZTR0LVE&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  //layer 6 Company general
  layers[6] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUHRVN0Y4TVdINjg&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  //layer 7 Company Size
  layers[7] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkM19nVzdENlNIVEk&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  //layer 8 Company Exports and Revenues
  layers[8] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkUXZQOUxQd0UyWDQ&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  //layer 9 Company New Hires & Growth
  layers[9] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkeHIzZi00M3dHLXc&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  //layer 10 Company Tax Impact
  layers[10] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vka0NMc1NSbjhyemc&export=download', {
    preserveViewport: false,
    suppressInfoWindows: true
  });

  for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(null);
    google.maps.event.addListener(layers[i], "click", openInfoWindow);
  }
}


function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
}

//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
   html,
   body,
   #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px;
   }
   #checkboxes {
     position: absolute;
     top: 30px;
     right: 10px;
     font-family: 'arial', 'sans-serif';
     font-size: 14px;
     background-color: white;
     border-width: 2px;
     border-style: groove;
   }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="checkboxes">
  <input type="checkbox" id="layer0" onclick="toggleLayer(0)" />NDP
  <br>
  <input type="checkbox" id="layer1" onclick="toggleLayer(1)" />Liberal
  <br>
  <input type="checkbox" id="layer2" onclick="toggleLayer(2);toggleLayer(3);toggleLayer(4);" />PC
  <br>
  <input type="checkbox" id="layer5" onclick="toggleLayer(5)" />Schools
  <br>
  <input type="checkbox" id="layer6" onclick="toggleLayer(6)" />Company (General)
  <br>
  <input type="checkbox" id="layer7" onclick="toggleLayer(7)" />Company Size
  <br>
  <input type="checkbox" id="layer8" onclick="toggleLayer(8)" />Company Exports &amp; Revenues
  <br>
  <input type="checkbox" id="layer9" onclick="toggleLayer(9)" />Company new Hires &amp; Job Growth
  <br>
  <input type="checkbox" id="layer10" onclick="toggleLayer(10)">Company Tax Impact</div>

相关问题
最新问题