it-roy-ru.com

Как добавить CSS-класс в маркер Google Maps?

Я хочу анимировать (fadein, fadeout) маркер в моем приложении GoogleMaps (в Интернете). 

Как я могу назначить любой класс CSS для маркера?

Или как я могу получить доступ к конкретному маркеру? У них есть селекторы вроде: после или что-то? 

Если нет, то как проще всего применять к ним анимацию?

17
Bastian Gruber

DOMNode, который содержит изображение, используемое для маркера, не доступен через API.

Кроме того, по умолчанию маркеры не будут одиночными DOMNodes, они будут нарисованы через холст.

Но изображение маркера может быть доступно через CSS, когда вы используете уникальный URL-адрес значка для каждого маркера.


Пример (с использованием jQuery):

<style type="text/css">
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
  opacity: 0.5
}
</style>
<script  type="text/javascript">
      function initialize() {
        var index=0;
        var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(52.5498783, 13.425209099999961),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        marker=new google.maps.Marker({position:map.getCenter(),
                 map:map,optimized:false,
                 icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)});

        google.maps.event.addListener(marker,'mouseover',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:1});
        });

        google.maps.event.addListener(marker,'mouseout',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:.5});
        });
      }

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

</script> 

Как работает ist:

В примере в качестве маркера-значка используется одно изображение ( http://www.google.com/mapfiles/marker.png ).

через CSS мы применяем непрозрачность. Вы можете заметить, что внутри URL есть i-параметр. Этот параметр будет использоваться для того, чтобы сделать img-src уникальным.

Я использую переменную, которая будет увеличиваться, чтобы получить уникальный img-src:

var index=0;

//a few lines later:
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)

Теперь вы сможете выбрать элемент <img/>-, используемый для маркера, например, onmouseover/onmouseout через селектор атрибута.

Если вы не хотите использовать Vanilla Javascript, вы можете использовать document.querySelector для доступа к изображению.

Примечание: вы должны установить для параметра optimized- маркера значение false (это заставит API отображать маркер как один элемент)
Демонстрация:http://jsfiddle.net/doktormolle/nBsh4/

17
Dr.Molle

Есть хитрость, которая может сработать, если вы, например, хотите изменить курсор для маркера Добавьте это:

google.maps.event.addListener(YOURMARKER,'mouseover',function(){$(".gm-style   div").addClass("markerClass")});                        
google.maps.event.addListener(YOURMARKER,'mouseout',function(){$(".gm-style div").removeClass("markerClass")});                        

а также 

#YOUR-CANVAS .gm-style div {cursor: default !important;}
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important}

работает как шарм

0
Hendrik Eppinga