[英]KML Layer Will Not Toggle Properly, Google Maps
我正在使用Google Maps API和KML创建交互式校园地图。 我有一个地面叠加和一层KML标记的地图。 我试图弄清楚如何让KML图层切换。 我目前已将其设置为通过复选框切换,但它仅在您第一次单击复选框时切换。 任何后续点击什么都不做。 KML层就消失了。 我有一种感觉,这可能是一个简单的JavaScript修复,但我是javascript的新手,我无法弄明白。 谁知道我做错了什么? 在此先感谢您的帮助。
这是我的所有代码:
<script type="text/javascript">
function initialize() {
var map;
var omaha = new google.maps.LatLng(41.265437, -95.947405);
var MY_MAPTYPE_ID = 'blue';
var stylez = [
{
featureType: "all",
stylers: [
{ hue: "#004A96" },
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ hue: "#000000" },
]
},
{
featureType: "road",
elementType: "local",
stylers: [
{ hue: "#24356B" },
{ saturation: 55 },
{ lightness: 20 }
]
},
{
featureType: "poi.school",
elementType: "geometry",
stylers: [
{ hue: "#24356B" },
{ saturation: 55 },
{ lightness: 20 }
]
}
];
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.2599,-95.9601),
new google.maps.LatLng(41.2718,-95.9367));
var mapOptions = {
zoom: 15,
center: omaha,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var styledMapOptions = {
name: "Blue"
};
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/CampusMap.png",
imageBounds);
oldmap.setMap(map);
var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
var kmlOptions = {
preserveViewport: 1
};
kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
kmlLayer01.setMap(map);
// initially show KML Layer 01
document.getElementById('show_hide_KML_Layer_01').checked = true;
}
function toggleKMLLayer01() {
if (!document.getElementById('show_hide_KML_Layer_01').checked)
kmlLayer01.setMap(null);
else
kmlLayer01.setMap(map); }
</script>
</head>
<body onload="initialize()">
<p><input type="checkbox" id="show_hide_KML_Layer_01" onclick="toggleKMLLayer01();" />ADA Layer</p>
<div id="map_canvas"></div>
</body>
没有代码的顶部,我不能完全确定,但我的预感是你需要使map
变量全局,否则toggle
不会将setMap
map
。 我写了以下内容,其中有效:
var map;
function initialize() {
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
var kmlOptions = {
preserveViewport: 1
};
kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
kmlLayer01.setMap(map);
// initially show KML Layer 01
document.getElementById('show_hide_KML_Layer_01').checked = true;
}
function toggleKMLLayer01() {
if (!document.getElementById('show_hide_KML_Layer_01').checked)
kmlLayer01.setMap(null);
else
kmlLayer01.setMap(map);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.