可以连接KML层以在一个复选框中显示它们(Google Maps)
Possible to concatenate KML layers to show them within one checkbox (Google Maps)?
我在这里创建了一个谷歌地图:http://userpages.flemingc.on.ca/~eluli/example3.html
由于google map KML的大小限制,我不得不将KML层分成三层(PC1, PC2, PC3)。我想知道我是否可以将这三个层连接起来,以便它们仅由一个复选框表示和启动。
JavaScript代码:
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: 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: false, suppressInfoWindows: true});
// Layer 3 PC2
layers [3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//Layer 4 PC3
layers [4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download',
{preserveViewport: false, suppressInfoWindows: true});
//layer 5 Schools
layers [5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download',
{preserveViewport: false, suppressInfoWindows: true});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'col9',
from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
}
});
layer2.setMap(map);
// Pop-up window
/* 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);
我的HTML代码:
<div id="map-canvas"></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)">PC1 <br>
<input type="checkbox" id="layer3" onclick="toggleLayer(3)">PC2 <br>
<input type="checkbox" id="layer4" onclick="toggleLayer(4)">PC3 <br>
<input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools
</div>
我的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;
}
可以了,(放大到最后一个区域):
<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
</div>
我会通过在这三个图层上设置preserveViewport: true来解决这个问题。
小提琴
相关文章:
- Google Maps Javascript API v3 地图显示在桌面浏览器上,但不会显示在移动浏览器上
- 在Google Maps API V3中只显示一个InfoBubble
- 使用Google Maps API和GeoXML3导入并显示本地KML文件
- 通过 Google Maps API 显示引导登录模式
- Google Maps API V3:简单标记群集未显示
- 显示来自AngularJS的Google Maps iFrame
- 在 Rails 应用程序中显示 Google Maps v3 上的标记 - 使用 Javascript 和 JSON
- Angular Google Maps/NodeJS:显示数据库中的标记
- Bing Maps v7-多边形会阻止多边形内(后面)显示的引脚的鼠标悬停事件
- 用于在Google Maps API V3中显示和隐藏驾驶方向上的所有标记的复选框
- 如何在Google Maps Places API上突出显示位置
- Google Maps:同时运行2个脚本来显示标记
- 我如何显示多个标记与infobubbles() &Google maps API v3中的选项卡
- 如何在Google Maps JS API v3中定制mapTypes按钮的显示
- Google Maps API和Google Maps location在PHP中显示不同的位置
- Google maps api:显示一个箭头,表示在地图上有一个不可见的标记
- 在Biostall-google-maps-V3 API库中显示带有latlong json数据的标记问题
- Google Maps API InfoWindow只显示所有标记的第一个位置
- Google Maps API v3 + Foundation 4 Reveal模式显示不正常
- InfoWindow上面没有显示标记Google Maps JavaScript API v3