Как скрыть Google Maps Api Markers с помощью jQuery
Привет, это может быть действительно глупый вопрос, но я пытаюсь сделать маркеры исчезающими, когда
они нажимаются. Маркер правильно расположен на карте, но когда я нажимаю на него, он не
Делать что-нибудь. Мне было интересно, почему он не работает. Спасибо!
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myOptions = {
center: new google.maps.LatLng(40.1, -88.2),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLatlng = new google.maps.LatLng(40.1, -88.2);
var temp_marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
console.log($(temp_marker));
console.log(temp_marker);
//temp_marker.click(function(){$(this).hide();});
$(temp_marker).click(function(){console.log("click is working"); $(this).hide();});
});
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
Ответы
Ответ 1
temp_marker
- объект Javascript, а не элемент DOM. Чтобы прикрепить прослушиватель к маркеру (API будет обрабатывать специфику, для которого элемент DOM должен быть присоединен и как), вы должны использовать собственную систему событий Google Maps API, например:
google.maps.event.addListener(marker, 'click', function() {
marker.setVisible(false); // maps API hide call
});
Их документация: Google Maps Javascript API v3 - События
Ответ 2
Бен предоставил вам половину ответа. Как только вы сможете обнаружить событие щелчка маркера, вам нужно "скрыть" или удалить маркер с карты. Стандартный способ сделать это с помощью карт Google - это сделать:
this.setMap(null);
Затем вы можете снова отобразить карту, используя setMap для назначения вашего объекта карты вместо нулевого.
Ответ 3
Расширяясь на нотах Бена, это должно происходить там, где вы объявили свой маркер - например:
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
google.maps.event.addListener(beachMarker, 'click', function() {
beachMarker.setVisible(false); // maps API hide call
});
}
Мне потребовалось время, пытаясь понять это. Огромный кредит Бен! Спасибо!
Ответ 4
marker
- это объект карты Google, а не элемент DOM. JQuery работает с элементами DOM.
Ответ 5
Я не уверен, что вы можете просто скрыть маркер, но соответствующий крючок для события click будет делать что-то вроде этого, когда вы объявляете marker
google.maps.event.addListener(marker, 'click', function() {
// do your hide here
});
Возможно, вам придется удалить маркер с карты, а не "скрывать" его.
На что вы пытаетесь скрыть маркеры? У вас есть возможность просмотреть маркер? Как вы планируете это сделать?