在样式化地图上切换kml-Layer只能使用一次 [英] Toggle kml-Layer on styled map only works once
本文介绍了在样式化地图上切换kml-Layer只能使用一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想让复选框打开和关闭kml-Layers。我试图在google maps api v3中使用样式化的地图。图层确实出现，我可以将它们关闭。但该按钮只能工作一次。
这（ http://jsbin.com/irahef/186/edit）帮了我很多。
在这里，他们还使用一个风格化的谷歌地图： http://www.strahlen.org/ map / map.htm
我相信这只是一个小错误，但我不明白它的工作原理。
是否有人有线索？
Javascript看起来像这样：
< html> ;
< head>
< script type =text / javascriptsrc =https://maps.google.com/maps/api/js?sensor=false< / script>
< script>
var layers = [];
函数toggleLayer（i）{
if（layers [i] .getMap（）== null）{
layers [i] .setMap（map）;}
else {
layers [i] .setMap（null）;}}
函数initialize（）{var styles = [{featureType：poi，elementType：geometry stylers：[{color：#dcdcdc}]}，{featureType：landscape，elementType：geometry.fill，stylers：[{color：＃d2d2d2 }]}，{featureType：road.highway，elementType：geometry.fill，stylers：[{color：#ffffff}]}，];
var styledMap = new google.maps.StyledMapType（styles，
{name：Styled Map}）;
var latlng = new google.maps.LatLng（52.5028910,13.41032740）;
var myOptions = {
zoom：10，
center：latlng，
mapTypeControlOptions：{
mapTypeIds：[google.maps.MapTypeId.ROADMAP，'meine_styles']
}
};
var map = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;
layers [0] = new google.maps.KmlLayer（{url：'https：//sites.google.com /site/kmykmlfiles/mykml/einkaufen.kml'}，{preserveViewport：true }）;
layers [1] = new google.maps.KmlLayer（{url：'https：//sites.google.com/site/kmykmlfiles/mykml/1_entspannen.kml'}，{preserveViewport：true}）;
layers [2] = new google.maps.KmlLayer（{url：'https：//sites.google.com/site/kmykmlfiles/mykml/1_essen.kml'}，{preserveViewport：true}）;
for（var i = 0; i< layers.length; i ++）{
layers [i] .setMap（map）;}
map.mapTypes.set 'meine_styles'，styleledMap）;
map.setMapTypeId（'meine_styles'）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script> < /头>
< body onload =initialize（）>
< div id =map_canvas>< / div>
Einkaufen< input type =checkboxid =layer0onclick =toggleLayer（0）checked>
Entspannen< input type =checkboxid =layer1onclick =toggleLayer（1）checked>
Essen< input type =checkboxid =layer2onclick =toggleLayer（2）checked>
< / body>
感谢您的帮助！
Anne
你的map变量是初始化函数的局部变量，并且在复选框处理程序执行的全局作用域中不可用：
$ b $ b
var map = null;
函数initialize（）{
//为清晰起见删除了代码
map = new google.maps.Map（document.getElementById（map_canvas ），myOptions）;
I'd like to have checkboxes to turn kml-Layers on and off. I tried to do that with a styled map in the google maps api v3. The Layers really do appear and I can toggle them off. But the button only works once.
This (http://jsbin.com/irahef/186/edit) helped me a lot.
Here they also use a styled google map: http://www.strahlen.org/map/map.htm
I'm sure it's just a small mistake but I don't get it working.
Does somebody has a clue?
The Javascript looks like this:
<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"</script>
<script>
var layers = [];
function toggleLayer(i) {
if(layers[i].getMap() == null) {
layers[i].setMap(map);}
else {
layers[i].setMap(null);}}
function initialize() { var styles = [ { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#dcdcdc" } ] },{ "featureType": "landscape", "elementType": "geometry.fill", "stylers": [ { "color": "#d2d2d2" } ] },{ "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#ffffff" } ] }, ];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'meine_styles']
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
layers[0] = new google.maps.KmlLayer({url:'https://sites.google.com /site/kmykmlfiles/mykml/einkaufen.kml'}, {preserveViewport: true});
layers[1] = new google.maps.KmlLayer({url:'https://sites.google.com/site/kmykmlfiles/mykml/1_entspannen.kml'}, {preserveViewport: true});
layers[2] = new google.maps.KmlLayer({url:'https://sites.google.com/site/kmykmlfiles/mykml/1_essen.kml'}, {preserveViewport: true});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(map);}
map.mapTypes.set('meine_styles', styledMap);
map.setMapTypeId('meine_styles');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script> </head>
<body onload="initialize()">
<div id="map_canvas"></div>
Einkaufen <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked>
Entspannen <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked>
Essen <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked>
</body>
Grateful for any help!
Anne
解决方案
Your map variable is local to the initialize function and is not available in the global scope where the checkbox handlers execute:
var map = null;
function initialize() {
// removed code for clarity
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
这篇关于在样式化地图上切换kml-Layer只能使用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
