5

チェックボックスを使用して、トグルブルトラフィック、クラウド、天気のレイヤーをGoogleマップに追加しようとしています。ただし、そうしようとすると、ボックスがオンになっているかオフになっているかに関係なく、すべてのレイヤーが消えます。私はJavascriptでこのようなことをしたことがなく、Javascriptを初めて使用するので、何が間違っているのかわかりません。これが私のコードです、どんな助けでも素晴らしいでしょう！

Javascript：

        function check() 
    {
        var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
        });
        var trafficLayer = new google.maps.TrafficLayer();
        var cloudLayer = new google.maps.weather.CloudLayer();

        if(document.getElementById('weather').checked)

        {weatherLayer.setMap(map);}

        else if(!document.getElementById('weather').checked)

        {weatherLayer.setMap(map);}

        cloudLayer.setMap(map);

        trafficLayer.setMap(map);
    }

HTML

        <label><input type="checkbox" id="weather" checked="checked" onclick="check()" />Weather</label>
        <label><input type="checkbox" id="clouds" onclick="check()" />Clouds</label>
        <label><input type="checkbox" id="traffic" onclick="check()" />Traffic</label>
4

1 に答える 1

6
  1. 天気レイヤーを使用するには、ライブラリを含める必要があります
  2. グローバルスコープ（HTMLクリックリスナーが実行される場所）でレイヤーを有効または無効にするには、マップをグローバルにする必要があります（関数の外部で定義しますが、onloadイベントで初期化します）
  3. また、グローバルスコープでレイヤーを定義する必要があります。
  4. レイヤーを表示するにはsetMap（map）を使用し、非表示にするにはsetMap（null）を使用します

変更された「チェック」機能：

    function check() 
{

    if(document.getElementById('weather').checked)

      {weatherLayer.setMap(map);}

    else 

      {weatherLayer.setMap(null);}

    if(document.getElementById('clouds').checked)

      {cloudLayer.setMap(map);}

    else 

      {cloudLayer.setMap(null);}

    if(document.getElementById('traffic').checked)

       {trafficLayer.setMap(map);}

    else

       {trafficLayer.setMap(null);}
}

実例

于 2013-03-09T16:17:58.743 に答える