地图 v3 API kml 图层单击时更改透明度

发布于 2024-10-06 15:32:44 字数 781 浏览 0 评论 0原文

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

原文

The final goal is to display a few kml overlays on one map and set the transparency value by clicking on a control button for each kml layer (depending on how much layers there are).

My first idea was changing opacity/transparency directly by the div layer.. but I can't find any way to address the div where the kml layer is shown in the map.

Does someone know a way to address the div where the KML is inserted by the KmlLayer(..)?

Now I'm trying to find a way to do it via the KmlLayer Object..
but so far no luck either..

Any ideas how to handle this?

The Code is:

(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);
}
})();

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傾城如夢未必闌珊 2024-10-13 15:32:44

据我所知，通过标准 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 属性不透明度在 IE 中不起作用，您必须对 IE 使用 filter:alpha(opacity=40) 或者您可以使用jQuery .fade() 方法。

To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties.
If you have multiple KML files you will probably need to name your images so that the name reflects which KML image belongs to. so if you have KML1 prepend KML1 to all your image names in that KML and search for that string using jQuery selector.

Here is an example using jquery which targets all images (for searches on substrings see 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>

NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.

回复收藏 0 原文

~没有更多了~