Google Maps API多个KML图层 [英] Google Maps API Multiple KML Layers
本文介绍了Google Maps API多个KML图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不是一个程序员，但我学得很快。对不起，如果我的代码不漂亮。
我使用以下代码将.KMLs拉到使用Google Maps API的样式化地图。我已经很好地解决了这个问题，并且寻找了各种解决方案，但我一直在努力将多个.KML图层调用到地图上。
我在下面使用的代码已经从多个来源获得，包括其他帖子在这里（在发布之前我已经搜索过），但它不是很工作，所以我必须已经错过了图层变量被引用的方式。为什么我的.KML图层不显示？
< script type =text / javascript>
< style>
#map {
width：100％;
height：400px;
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< script>
/ **
* @fileoverview显示捕获KML文件的示例单击
*并在侧面板中显示内容而不是
* InfoWindow
* /
var map;
var layers = [];
layers [0] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9AB.kml，{
preserveViewport：false
}）;
layers [1] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9FirstNations1.kml，{
preserveViewport：false
}）;
layers [2] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9FirstNations2.kml，{
preserveViewport：false
}）;
/ **
*初始化地图并调用创建多段线的函数。
* /
函数initialize（）{
map = new google.maps.Map（document.getElementById（'map'），{
center：new google.maps.LatLng （43.6424359，-79.37448849999998），
zoom：2，
disableDefaultUI：true，
mapTypeId：google.maps.MapTypeId.ROAD
}）;
loadKmlLayer（layers，map）;
$ b map.set（'styles'，[
{
featureType：'all'，
elementType：'geometry.fill'，
stylers：[
{visibility：'off'}，
{color：'＃000000'}
]
}，
{
featureType：'landscape.natural.terrain'，
elementType：'geometry.stroke'，
stylers：[
{visibility：'on'}，
{color：'＃ FFFFFF'}，
{weight：1}
]
}，
{
featureType：'landscape.natural.terrain'，
elementType：' geometry.fill'，
stylers：[
{visibility：'on'}，
{color：'#FFFFFF'}
]
}，
{
featureType：'landscape.natural.terrain'，
stylers：[
{visibility：'on，}，
]
}，
{
featureType：'water'，
elementType：'geometry.fill'，
stylers：[
{visibility： on'}，
{color：'＃365F91'}
]
}，
{
featureType：'road'，
elementType：'geometry '，
stylers：[
{visibility：'on'}
]
}，{
featureType：'road'，
elementType：'labels '，
stylers：[
{visibility：'on'}
]
}，{
featureType：'poi'，
elementType：'geometry '，
stylers：[
{visibility：'off'}
]
}，{
elementType：'labels.icon'，
stylers： [
{visibility：'on'}
]}，
{
elementType：'labels.text.stroke'，
stylers：[
{ visibility：'on'}
]}，
{
elementType：'labels.text.fill'，
stylers：[
{visibility：'on'}
]}
]）;
}
/ **
*根据传递的URL添加KMLLayer。
* /
function loadKmlLayer（layers，map）{
var kmlLayer = new google.maps.KmlLayer（layers，{
preserveViewport：false，
map：map}）;
$ b google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
解决方案
p>
这项工作..
<！DOCTYPE html>
< html>
< head>
< style>
#map {
width：100％;
height：400px;
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< / head>
< body>
< div id =mapstyle =width：1000px; height：1000px;>< / div>
< script>
/ **
* @fileoverview显示捕获KML文件的示例单击
*并在侧面板中显示内容而不是
* InfoWindow
* /
var map;
/ **
*初始化地图并调用创建多段线的函数。
* /
函数initialize（）{
map = new google.maps.Map（document.getElementById（'map'），{
center：new google.maps.LatLng （43.6424359，-79.37448849999998），
zoom：2，
disableDefaultUI：true，
mapTypeId：google.maps.MapTypeId.ROAD
}）;
var layers = [];
layers [0] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9AB.kml，{
preserveViewport：false，
map：map
}）;
layers [1] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9FirstNations1.kml，{
preserveViewport：false，
map：map
}）;
layers [2] = new google.maps.KmlLayer（http://www.pipeleaks.org/map_files/Line9FirstNations2.kml，{
preserveViewport：false，
map：map
}）;
$ b map.set（'styles'，[
{
featureType：'all'，
elementType：'geometry.fill'，
stylers：[
{visibility：'off'}，
{color：'＃000000'}
]
}，
{
featureType ：'landscape.natural.terrain'，
elementType：'geometry.stroke'，
stylers：[
{visibility：'on'}，
{color：'#FFFFFF '}，
{weight：1}
]
}，
{
featureType：'landscape.natural.terrain'，
elementType：'geometry .fill'，
stylers：[
{visibility：'on'}，
{color：'#FFFFFF'}
]
}，
{
featureType：'landscape.natural.terrain'，
stylers：[
{visibility：'on，
]
}，
{
featureType：'water'，
elementType：'geometry.fill'，
stylers：[
{visibility： on'}，
{color：'＃365F91'}
]
}，
{
featureType：'road'，
elementType：'geometry '，
stylers：[
{visibility：'on'}
]
}，{
featureType：'road'，
elementType：'labels '，
stylers：[
{visibility：'on'}
]
}，{
featureType：'poi'，
elementType：'geometry '，
stylers：[
{visibility：'off'}
]
}，{
elementType：'labels.icon'，
stylers： [
{visibility：'on'}
]}，
{
elementType：'labels.text.stroke'，
stylers：[
{ visibility：'on'}
]}，
{
elementType：'labels.text.fill'，
stylers：[
{visibility：'on'}
]}
]）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
I'm not much of a programmer but I'm learning pretty fast. Excuse me if my code isn't pretty.
I'm using the following code to pull .KMLs to a styled map using google maps API. I've got this down pretty well and have looked for various solutions, but I'm struggling to call multiple .KML layers to the map at once.
The code I've used below has been pulled from multiple sources including other posts here at stack (I did search before posting) but it is not quite working so I must have missed something with the way the layers variable is referenced. Why aren't my .KML layers showing up?
<script type="text/javascript">
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
/**
* @fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
var layers = [];
layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{
preserveViewport: false
});
layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{
preserveViewport: false
});
layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{
preserveViewport: false
});
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6424359, -79.37448849999998),
zoom: 2,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROAD
});
loadKmlLayer(layers, map);
}
map.set('styles', [
{
featureType: 'all',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'off' },
{ color: '#000000' }
]
},
{
featureType: 'landscape.natural.terrain',
elementType: 'geometry.stroke',
stylers: [
{ visibility: 'on' },
{ color: '#FFFFFF' },
{ weight: 1 }
]
},
{
featureType: 'landscape.natural.terrain',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ color: '#FFFFFF' }
]
},
{
featureType: 'landscape.natural.terrain',
stylers: [
{ visibility: 'on' },
]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ color: '#365F91' }
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ visibility: 'on' }
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ visibility: 'on' }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}, {
elementType: 'labels.icon',
stylers: [
{ visibility: 'on' }
] },
{
elementType: 'labels.text.stroke',
stylers: [
{ visibility: 'on' }
] },
{
elementType: 'labels.text.fill',
stylers: [
{ visibility: 'on' }
] }
]);
}
/**
* Adds a KMLLayer based on the URL passed.
*/
function loadKmlLayer(layers, map) {
var kmlLayer = new google.maps.KmlLayer(layers, {
preserveViewport: false,
map: map});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
解决方案
I have played a little bit with your code
this work ..
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px;"></div>
<script>
/**
* @fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6424359, -79.37448849999998),
zoom: 2,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROAD
});
var layers = [];
layers [0] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9AB.kml",{
preserveViewport: false,
map: map
});
layers [1] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations1.kml",{
preserveViewport: false,
map: map
});
layers [2] = new google.maps.KmlLayer("http://www.pipeleaks.org/map_files/Line9FirstNations2.kml",{
preserveViewport: false,
map: map
});
map.set('styles', [
{
featureType: 'all',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'off' },
{ color: '#000000' }
]
},
{
featureType: 'landscape.natural.terrain',
elementType: 'geometry.stroke',
stylers: [
{ visibility: 'on' },
{ color: '#FFFFFF' },
{ weight: 1 }
]
},
{
featureType: 'landscape.natural.terrain',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ color: '#FFFFFF' }
]
},
{
featureType: 'landscape.natural.terrain',
stylers: [
{ visibility: 'on' },
]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ visibility: 'on' },
{ color: '#365F91' }
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ visibility: 'on' }
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ visibility: 'on' }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}, {
elementType: 'labels.icon',
stylers: [
{ visibility: 'on' }
] },
{
elementType: 'labels.text.stroke',
stylers: [
{ visibility: 'on' }
] },
{
elementType: 'labels.text.fill',
stylers: [
{ visibility: 'on' }
] }
]);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
这篇关于Google Maps API多个KML图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
