1


我想要有复选框来打开和关闭 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/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>

感谢您的帮助！
安妮

4

1 回答 1

0

您的 map 变量是初始化函数的本地变量，并且在执行复选框处理程序的全局范围内不可用：

var map = null;

function initialize() {  

// removed code for clarity

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

工作示例

于 2013-05-28T19:53:11.323 回答