Question

我想要有复选框来打开和关闭kml-Layers。我试图用谷歌地图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>

感谢任何帮助！
安

Answer 1

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

var map = null;

function initialize() {  

// removed code for clarity

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

working example

在样式化地图上切换kml-Layer只能使用一次

1 个答案: