map v3 api kml меняют прозрачность слоя по клику - PullRequest
Новая
       42

map v3 api kml меняют прозрачность слоя по клику

1 голос
/ 08 декабря 2010

Конечная цель - отобразить несколько кмл оверлеев на одной карте и установить значение прозрачности, нажав на кнопке управления для каждого слоя кмл (в зависимости от того, сколько там слоевare).

Моей первой идеей было изменение непрозрачности / прозрачности напрямую с помощью слоя div ... но я не могу найти способ обратиться к div, где слой kml отображается на карте.

Кто-нибудь знает способ обратиться к div, где KML вставляется KmlLayer (..)?

Теперь я пытаюсь найти способ сделать это черезKmlLayer Object .. но пока что тоже не повезло ..

Есть идеи, как с этим справиться?

Код: 

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

1 Ответ

1 голос
/ 13 января 2011

Насколько мне известно, это невозможно через стандартный API Google, но вы можете сделать это с помощью 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 не работает в IE, вы должны использовать filter: alpha (opacity = 40) для IE или вы можете использовать метод jQuery .fade ().

...