4

Google マップで KML レイヤーを切り替えようとしています。トグルボタンなしで1つのレイヤーのみが表示されるように設定しました。オンラインで多くの例をたどりましたが、どれもうまくいかないようです。これまでにセットアップしたコードは次のとおりです。

<html>
<head>
<script type="text/javascript">
var layers=[];
layers[0] = new  google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
 {preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
{preserveViewport: true});
var map;

function initialize() {
    var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
    var myOptions = {
            zoom: 3,
            center: latlng,
            mapTypeIds: google.maps.MapTypeId.ROADMAP
    }
            map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }

function toggleLayers(i)
{
        if(layers[i].getmap()==null){
                kmlLayer01.setMap(null);
        }
        else{
                    layers[i].setMap(null);
            }
}


</script> </head>
<body onload="initialize()">
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
<div id="map_canvas"></div>
</body>
</html>

助けてください！

4

2 に答える 2

9

  1. 投稿されたコードには API が含まれていません。これがありません。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  2. いくつかのタイプミスがあります:

    • getmap は有効なメソッド名ではありません。getMap にする必要があります。

    • kmlLayer01 が定義されていません。おそらくレイヤ [i] である必要があります

      <html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var layers=[];

layers[0] = new  google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
{preserveViewport: true});

layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
{preserveViewport: true});
var map;

function initialize() {
    var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
    var myOptions = {
            zoom: 3,
            center: latlng,
            mapTypeIds: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}

function toggleLayers(i)
{

  if(layers[i].getMap()==null) {
     layers[i].setMap(map);
  }
  else {
     layers[i].setMap(null);
  }
  document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
}


</script>
</head>
<body onload="initialize()">
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>
</body>
</html>

実施例

コードスニペット：

var layers = [];

layers[0] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml",
  /*'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml', original KML no longer available */
  {
    preserveViewport: true
  });

layers[1] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml",
  /* 'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz', original KML no longer available */
  {
    preserveViewport: true
  });
var map;

function initialize() {
  var latlng = new google.maps.LatLng(38, -112 /*52.5028910, 13.41032740 */ );
  var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeIds: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function toggleLayers(i) {

  if (layers[i].getMap() == null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
  document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
}

google.maps.event.addDomListener(window, 'load', initialize);
<script src="http://maps.google.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" onclick="toggleLayers(0);" />Layer2
<input type="checkbox" id="layer_02" onclick="toggleLayers(1);" />
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>

于 2013-07-01T17:32:16.460 に答える
0

ラヴィン、

2 つの異なるマップがある場合は、マップの変数を関数に渡します。

function toggleLayers(i,theMap)
{

 if(layers[i].getMap()==null) {
     layers[i].setMap(theMap);
  }
  else {
     layers[i].setMap(null);
}
  document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
}

レア。

于 2014-02-05T06:14:56.997 に答える