5

追加するときに kml レイヤーの透明度を設定する方法はありますか? 下の通りが透けて見えない kml レイヤーを追加しています。これを達成する方法はありますか

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'images/test3.kml'
  });

  var ctaLayer2 = new google.maps.KmlLayer({
    url: 'images/test.kml'
  });
  var ctaLayer3 = new google.maps.KmlLayer({
    url: 'images/kmztest2.kmz'
  });
  ctaLayer3.setMap(map);
  ctaLayer2.setMap(map);
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
4

4 に答える 4

7

KML は Google Maps API によって DOM の画像として追加されるため、その属性<img>に含まれる要素を検索することにより、CSS で不透明度を変更できます。"kml"src

#map img[src*='kml'] {
    opacity: .5;
}

また、jQuery を使用してこれを実現できます。

jQuery("#map").find("img[src*='kml']").css("opacity","0.5");

ただし、ユーザーがマップを縮小または移動すると、新しいKML 画像が読み込まれるため、その jQuery 関数を再度呼び出す必要があることに注意してください。

于 2016-03-09T16:22:03.557 に答える
4

KmlLayer 内のポリゴンの不透明度を変更することはできません。あなたには3つのオプションがあります（私が考えることができます）：

  1. KML で不透明度を定義する

たとえば、KML は次のようになります。

<Style
  id="Style1">
  <LineStyle><color>66000001</color><width>1</width></LineStyle>
  <PolyStyle>
    <color>00ff6633</color>  <!-- first 00 is opacity of zero -->
    <fill>1</fill>
    <outline>1</outline>
  </PolyStyle>
</Style>
<Placemark id="Opacity0">
  <name>Opacity 0</name>
  <visibility>1</visibility><open>0</open><styleUrl>#Style1</styleUrl>
  <Polygon><extrude>0</extrude><tessellate>1</tessellate><altitudeMode>clampToGround</altitudeMode>
    <outerBoundaryIs><LinearRing><coordinates>-116.365673309192,43.6628960911185 -116.365591334179,43.6560111958534 -116.364375539124,43.6559975333512 -116.364402864128,43.6483204644173 -116.359539767727,43.6483955662698 -116.359567092732,43.64422573708 -116.356452545151,43.6442223004997 -116.356329582632,43.6403188481927 -116.355482675135,43.6384234484285 -116.354444492608,43.6376550793648 -116.354198567569,43.6375697515905 -116.354198567569,43.6375560890883 -116.354348855093,43.6375355534256 -116.352818906307,43.6375834140927 -116.349636046216,43.6375697515905 -116.349677033722,43.6339155770838 -116.317438473925,43.6339155770838 -116.314392238855,43.6339600011706 -116.314187301323,43.6484194546938 -116.334391040727,43.6484843306243 -116.33440470323,43.6627594660968 -116.335292598233,43.6629438679665 -116.336767980829,43.6629097536206 -116.359348576516,43.6629985179752 -116.360673587769,43.6628994438797 116.365673309192,43.6628960911185</coordinates>

 </LinearRing></outerBoundaryIs></Polygon>
 </Placemark>

結果のマップのスクリーンショット

  1. KML を FusionTables にインポートし、FusionTablesLayer を使用します (これにより、ポリゴンの不透明度を変更できます) (FusionTables は 2019 年 12 月 3 日に停止/オフになるため、もはや役に立ちません)

  2. KML がそれほど複雑でない場合は、サード パーティのパーサー ( geoxml3またはgeoxml-v3を使用します。これらは KML を解析し、ネイティブの Google Maps Javascript API v3 オブジェクトとしてレンダリングします (不透明度を変更できます)。

于 2013-06-02T22:39:53.310 に答える
1

このソリューションは、ズーム レベルを変更するときにわずかなフラッシュが発生するため、完全ではありませんが、これが役立つ場合があります。

google.maps.event.addListener(map, 'tilesloaded', function() {
            $("#map").find("img").css("opacity","0.5");
});
于 2017-05-25T04:00:45.740 に答える