Google Maps. Изменение маркера при клике
Карта, на ней много маркеров. У всех однотипные иконки.
Задача - при нажатии на одну из меток - у неё изменяется иконка.
При клике на другой маркер, у предыдущего иконка меняется на стандартную, а у текущего становится другой.
Написал следующий код:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
// Set active marker.
GEvent.addListener(marker, "click", function() {
// Delete all markers.
map.clearOverlays();
jQuery(points_array).each(function(i, point) {
map.addOverlay(new GMarker(point.coord, {icon : myIcon}));
});
map.addOverlay(new GMarker(marker.getLatLng(), {icon : activeIcon}));
map.panTo(marker.getLatLng());
});
Но он работает неверно. А вроде как всё логично. Снимаю все метки. Ставим заново. И добавляем ту, что с другой иконкой.
Подскажите, что я делаю не верно. И есть ли какие-то другие, более простые, пути решения этой задачи ?
Задача - при нажатии на одну из меток - у неё изменяется иконка.
При клике на другой маркер, у предыдущего иконка меняется на стандартную, а у текущего становится другой.
Написал следующий код:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
// Set active marker.
GEvent.addListener(marker, "click", function() {
// Delete all markers.
map.clearOverlays();
jQuery(points_array).each(function(i, point) {
map.addOverlay(new GMarker(point.coord, {icon : myIcon}));
});
map.addOverlay(new GMarker(marker.getLatLng(), {icon : activeIcon}));
map.panTo(marker.getLatLng());
});
Но он работает неверно. А вроде как всё логично. Снимаю все метки. Ставим заново. И добавляем ту, что с другой иконкой.
Подскажите, что я делаю не верно. И есть ли какие-то другие, более простые, пути решения этой задачи ?
1 ответов
GEvent.addListener(marker, 'click', function() {
active_marker.setIcon(myIcon);
active_marker = marker;
active_marker.setIcon(activeIcon);
});
И не нужно всё очищать а потом заново наносить, и массив маркеров перебирать не нужно. Единсвенное, это нужно при загрузке страницы занести в переменную active_marker начальный активный маркер. Или булевую переменную поставить и проверять её при клике, если изначально все маркеры одинаковые.