1

Googleマップアプリケーションを使用してWebページを開発しています。現在、3つのKML/KMZレイヤーを表示する機能的な検索バーとマップがあります。各レイヤーを切り替えて、1つ、2つ、または3つすべてを表示できるようにする必要があります。グーグルアースにも同様の機能がありますが、グーグルマップで必要です。これどうやってするの？

マップと検索バーのコードは次のとおりです。

<script type="text/javascript">
    var geocoder;
    var map; 
    var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (40.43, -74.00);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
      marker = new google.maps.Marker({map:map});

    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz');
        ctaLayer.setMap(map);
    var ctaLayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml');
        ctaLayer.setMap(map);
    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz');
        ctaLayer.setMap(map);
        }
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
    }); 
                            }
</script>
4

3 に答える 3

10

表示するために、単にsetMap(null)1つを非表示にsetMap(map)することです。layersどのレイヤーを切り替えるかを追跡するために、グローバル配列変数を保持します。

var layers = [];
layers[0] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz',
 {preserveViewport: true});
      layers[1] = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml', 
{preserveViewport: true});
      layers[2] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz', 
{preserveViewport: true});

preserveViewportオプションは、レイヤーが切り替えられたときにマップがジャンプするのを防ぎます。

切り替える機能は次のとおりです。

function toggleLayer(i) {
  if(layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}

グローバル変数を使用していることに注意してください。最後に、HTMLでは、チェックボックスまたはボタンを使用できます。最初にアクティブなレイヤーを1つだけ設定し、ラジオセットが更新されたときに適切なレイヤーを有効にすることで、ラジオボタンを使用することもできます。

Large weather <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked>
<input type="button" id="layer1" onclick="toggleLayer(1)" value="Racks">
Small weather <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked>

デモ全体はここにあり、マップの左上にコントロールがあります：http: //jsbin.com/irahef/edit#preview

于 2012-05-29T19:49:15.707 に答える
1

Heiterの答えは良いですが、jsbinの例のコードに少し追加します。初期化時にレイヤーを非表示にしたい場合は、変更する必要があります。

layers[i].setMap(map);

に

layers[i].setMap(null);

次に、チェックボックスがオフになっていることを確認します。

于 2012-12-03T00:43:32.790 に答える
0

Heitorが上記に投稿したコードを試してみたところ、レイヤーのオンとオフをクリックすると、マップに表示される順序が変わることに気付きました。レイヤーの順序を維持するためにこのソリューションを実装しましたが、多少非効率的である可能性があります。誰か提案があれば共有してください。

function toggleLayer(i) {
	var j;
	for (j = 0; j < layers.length ; j++ )
	{
		if (j != i)
		{
			if (layers[j].getMap() === null)
			{
				layers[j].setMap(null);
			} else {
				layers[j].setMap(map);
			}
		} else {	//toggle the selected layer
			if (layers[j].getMap() === null)
			{
				layers[j].setMap(map);
			} else {
				layers[j].setMap(null);
			}
			
		}
	}

}

于 2014-11-04T18:27:52.177 に答える