地图 v3 api kml 图层在点击时更改透明度答案

【问题标题】：maps v3 api kml layer change transparency on click地图 v3 api kml 图层在点击时更改透明度
【发布时间】：2010-12-08 16:12:50
【问题描述】：

最终目标是在一张地图上显示几个 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);
}
})();

【问题讨论】：

标签： api google-maps transparency kml layer

【解决方案1】：

据我所知，通过标准的 google api 是不可能的，但您可以使用 jquery 或其他一些库来做到这一点。 KML 图像只是 DOM 的一部分，因此如果您能找到节点，您就可以操作它们的属性。如果您有多个 KML 文件，您可能需要为图像命名，以便名称反映 KML 图像所属的名称。因此，如果您有 KML1 将 KML1 附加到该 KML 中的所有图像名称并使用 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() 方法。

【讨论】：