Как добавить CSS-класс В маркер GoogleMaps?
Я хочу анимировать (fadein, fadeout) маркер в моем приложении GoogleMaps (Web).
Как я могу назначить любой класс css маркеру?
или как я могу получить доступ к специфическим маркером? У них есть селекторы, такие как: after или что-то еще?
Если нет, то какой самый простой способ применения анимации к ним?
2 ответов
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 через селектор атрибутов.
когда вы wan't использовать vanilla javascript вы можете использовать document.querySelector
открыть изображение.
Примечание: необходимо указать optimized
- опция маркера на false
(это заставит API отображать маркер как один элемент)
демо: http://jsfiddle.net/doktormolle/nBsh4/
есть трюк, который может работать, если вы, например, хотите изменить курсор для маркера Добавьте это:
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}
работает