1

最終的な目標は、1 つのマップにいくつかのkml オーバーレイを表示し、各 kml レイヤーのコントロール ボタンをクリックして透明度の値を設定することです(レイヤーの数によって異なります)。

私の最初のアイデアは、divレイヤーによって直接不透明度/透明度を変更することでした..しかし、kmlレイヤーがマップに表示されているdivに対処する方法が見つかりません。

KmlLayer(..) によって KML が挿入される div に対処する方法を知っている人はいますか?

今、私は KmlLayer オブジェクトを介してそれを行う方法を見つけようとしています..しかし、これまでのところ運もありません..

これを処理する方法はありますか？

コードは次のとおりです。

(function() {
  window.onload = function(){

  var myLatlng = new google.maps.LatLng(48.1497, 11.5795);
  var myOptions = {
  zoom: 10,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

var georssLayer = new google.maps.KmlLayer('somemap.kml',({'suppressInfoWindows': true}));
georssLayer.setMap(map);
}
})();
4

1 に答える 1

1

私の知る限り、標準のGoogle APIでは不可能ですが、jqueryまたは他のライブラリを使用してこれを行うことができます. KML 画像は DOM の一部にすぎないため、ノードを見つけることができれば、それらのプロパティを操作できます。複数の KML ファイルがある場合、名前がどの KML 画像に属するかを反映するように画像に名前を付ける必要があるでしょう。そのため、KML1 がある場合、その KML 内のすべての画像名に KML1 を追加し、jQuery セレクターを使用してその文字列を検索します。

すべての画像を対象とする jquery を使用した例を次に示します (部分文字列の検索については、http://api.jquery.com/attribute-contains-selector/を参照してください)。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: KmlLayer KML</title> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
    $(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
    $("#map_canvas").find("img").css("opacity","0.4")

    })
    })


    function initialize() {
      var chicago = new google.maps.LatLng(41.875696,-87.624207);
      var myOptions = {
        zoom: 11,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

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

      var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
      ctaLayer.setMap(map);
    }
    </script> 
    </head> 
    <body onload="initialize()"> 

      <div id="map_canvas" style="width: 600px;height: 600px;"></div> 
      <input type="button" value="dim the lights" class="b_opacity">
    </body> 
    </html>

注: css プロパティ opacity は IE では機能しないことに注意してください。IE では filter:alpha(opacity=40) を使用するか、jQuery .fade() メソッドを使用する必要があります。

于 2011-01-13T09:12:01.083 に答える