KML 图层将无法正确切换,谷歌地图
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);
}
相关文章:
- 谷歌地图热图图层点半径
- 谷歌地图-更改图层图标大小
- 在谷歌地图HTML中简单地添加KML图层
- 谷歌地图叠加层消息不会保持隐藏状态
- 如何重新加载谷歌地图图层
- 清除谷歌地图图层时遇到问题
- 谷歌地图图块未在Bootstrap-Modal中加载
- 如何初始化谷歌地图图层
- Open Layers 3获取谷歌地图基线层
- 谷歌地图融合层忽略WHERE子句
- 三个js -谷歌地图图层选择
- 谷歌地图切换层
- 动态更新谷歌热图层
- 我想知道谷歌地图交通层中的车辆数量
- 在HTML文本区域中显示谷歌地图数据层
- 谷歌地图KML层的初始缩放和中心
- 如何从谷歌地图数据层中删除数据
- 我可以在谷歌地图数据层中设置笔触样式吗?
- 谷歌地图KML层-点击事件返回ZERO_RESULTS
- 我可以将地图限制为只在谷歌地图融合层的范围内搜索吗?