1


kml-Layers のオンとオフを切り替えるチェックボックスが必要です。Google Maps API v3 のスタイル付きマップでそれを実行しようとしました。レイヤーは実際に表示され、オフに切り替えることができます。ただし、ボタンは一度しか機能しません。
これ（http://jsbin.com/irahef/186/edit）は私を大いに助けてくれました。ここでは、スタイルを設定した Google マップも使用しています 。誰かが手がかりを持っていますか？
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

マップ変数は初期化関数に対してローカルであり、チェックボックス ハンドラーが実行されるグローバル スコープでは使用できません。

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 に答える