[英]Info Window not closing automatically (Google Maps)
I have created a map http://userpages.flemingc.on.ca/~eluli/example3.html When the layers are turned on, I click on them to see the InfoWindow.我创建了一个地图http://userpages.flemingc.on.ca/~eluli/example3.html当图层打开时,我点击它们以查看信息窗口。 As you can see from the link, the InfoWindows do not automatically close when I click on an another layer.
正如您从链接中看到的,当我单击另一个图层时,InfoWindows 不会自动关闭。
My JavaScript code is as follows.我的 JavaScript 代码如下。 The problem lies in // Pop-up window.
问题在于 // 弹出窗口。 I don't have the above issue when I enable this code.
当我启用此代码时,我没有上述问题。 However, then the map shows up with all the layers turned on (even though in the legend they are not checked off).
但是,然后地图显示所有图层都打开(即使在图例中它们没有被选中)。 This is not something that I want.
这不是我想要的。 I want the initial map to have no layers on so that the users themselves can toggle with the layers.
我希望初始地图上没有图层,以便用户自己可以切换图层。 And the InfoWindows to close automatically when I click on another layer.
当我单击另一层时,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);
My CSS:我的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;
}
My HTML:我的 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>
To get the infowindows to close when you click on another layer, set suppressInfowindows:true
, then add a click listener to each layer that calls your openInfoWindow
function.要在单击另一层时关闭信息窗口,请设置
suppressInfowindows:true
,然后向调用openInfoWindow
函数的每个层添加一个单击侦听器。 Declare a single global InfoWindow for all the layers to use.为要使用的所有层声明一个全局信息窗口。
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
google.maps.event.addListener(layers[i], "click", openInfoWindow);
}
proof of concept fiddle概念证明小提琴
code snippet:代码片段:
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 & 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.