Rails - GMap - Установите значок маркера на мышеквете в зависимости от типа маркера по умолчанию
-
21-12-2019 - |
Вопрос
У меня есть приложение Rails с маркерами на карте (розовые маркеры).Когда я у меня мыши маркер на боковой панели, это изменило цвет маркера на синий (следовать на карте), а затем, когда я нешухнут, он возвращается к исходному розову.(работает хорошо)
Но теперь я добавил другой цвет: когда я нажимаю на маркер (прямо на карте или на боковой панели) цвет маркера становится серым.Чтобы позволить своим пользователям знать, что они уже проверяют информацию из этого маркера.
Так что, если я сейчас на вершине серого маркера из боковой панели, маркер становится синим (нормальным), но если я нешухнул, IL становится розовым и должно оставаться серым.
Если розовый возвращается к розовому Если серый вернуться к серому Как я могу это сделать ?с видом атрибута?
<script type="text/javascript">
$(document).ready(function(){
var raw_markers = <%=raw @hash.to_json %>;
var input = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(input);
function createSidebarLi(json){
return json.sidebar;
//return ("<li>" + json.titre + ' ' + json.address + "</li>");
};
function bindLiToMarker($li, marker){
$li.on('click', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
google.maps.event.trigger(marker.getServiceObject(), 'click');
});
};
function bindLiToMarkerMouseOver($li, marker){
$li.on('mouseover', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
//google.maps.event.trigger(marker.getServiceObject(), 'click');
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerBleu.png");
});
};
function bindLiToMarkerMouseOut($li, marker){
$li.on('mouseout', function(){
//handler.getMap().setZoom(14);
marker.setMap(handler.getMap()); //because clusterer removes map property from marker
marker.panTo();
//google.maps.event.trigger(marker.getServiceObject(), 'click');
**if (marker.isVisited = true) {
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
} else {
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerRose.png");
}**
});
};
function createSidebar(json_array){
_.each(json_array, function(json){
var $li = $( createSidebarLi(json) );
$li.appendTo('#markers_list');
bindLiToMarker($li, json.marker);
bindLiToMarkerMouseOver($li, json.marker);
bindLiToMarkerMouseOut($li, json.marker);
});
};
function closeInfoWindow(handler){
if(handler.currentInfowindow()) {
handler.currentInfowindow().close();
}
}
handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
//handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){
var markers = handler.addMarkers(raw_markers);
_.each(raw_markers, function(json, index){
var marker = markers[index];
json.marker = marker;
//google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
//google.maps.event.trigger(marker.getServiceObject(), 'click');
//});
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
**marker.isVisited = true;**
});
});
createSidebar(raw_markers);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.centerMapOnUser();
google.maps.event.addListener(handler.getMap(), 'click', function(){
closeInfoWindow(handler);
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
});
});
});
</script>
. Решение
set посетили= true on click Event:
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
marker.serviceObject.set("isVisited", true);
});
.
если посетить= True Mouseout Seticon Grey, иначе Seticon Pink
function bindLiToMarkerMouseOut($li, marker){
$li.on('mouseout', function(){
marker.setMap(handler.getMap());
if (marker.serviceObject.get("isVisited")) {
marker.serviceObject.setIcon("path_to/greyMarker.png");
} else {
marker.serviceObject.setIcon("path_to/pinkMarker.png");
};
});
};
.