Google maps api 3 设置KML图层透明度
添加kml图层时,是否有方法设置其透明度?我添加了一个kml层,你无法看到下面的街道。有没有办法做到这一点Google maps api 3 设置KML图层透明度,google-maps-api-3,transparency,kml,Google Maps Api 3,Transparency,Kml,添加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
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);
无法修改Kmlayer中多边形的不透明度。你有三个选择(我能想到):
<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>
660000011
00ff6633
1.
1.
不透明度0
10#风格1
01
将KML导入FusionTables,并使用a(不再有用,因为FusionTables将在2019年12月3日关闭)
如果KML不太复杂,请使用第三方解析器(或者,它将解析KML并将其呈现为本机Google Maps Javascript API v3对象(允许您修改不透明度)
由于Google Maps API将KML添加为DOM中的图像,因此可以通过搜索属性来使用CSS更改其不透明度:
#map img[src*='kml'] {
opacity: .5;
}
此外,您还可以使用jQuery实现这一点:
jQuery("#map").find("img[src*='kml']").css("opacity","0.5");
但请记住,当用户缩小或移动地图时,将加载新的KML图像,因此您必须再次调用jQuery函数。此解决方案并不完美,因为它在更改缩放级别时会导致轻微闪烁,但有些人可能会发现此方法很有用:
google.maps.event.addListener(map, 'tilesloaded', function() {
$("#map").find("img").css("opacity","0.5");
});
如果使用preserveViewport:true
,则不会出现任何问题
var kmlLayer = new google.maps.KmlLayer(kmlsrc, {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
在我的情况下,缩放不受影响。