Подсветка маркера Google Maps

У меня есть сценарий, который размещает маркеры на карте, каждый маркер имеет свой уникальный идентификатор, установленный следующим образом:

marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: markerImg,
        id: uniqueid()
    });

после отправки каждого маркера в кластеризатор я запускаю функцию, которая создает боковую панель, содержащую все маркеры на карте. каждый div этой боковой панели представляет собой маркер:

<div id="sidebar">
   <div id="marker1234"></div>
   <div id="marker1235"></div>
   <div id="marker1236"></div>
   ...
</div>

Как я могу создать функцию, которая при наведении на div выделяет соответствующий маркер на карте? Проблема в том, что я не знаю, как настроить таргетинг на один маркер по его ID.

Я видел несколько решений, подобных этому http://www.geocodezip.com/v3_MW_example_hoverchange.html. (найдено здесь, в StackOverflow), но для создания боковой панели используется другой метод...

PS. Я хочу, чтобы все маркеры не зацикливались каждый раз, когда я наводил курсор на список маркеров...


sidebar google-maps-api-3 highlight hover marker
person user2543462    schedule 14.09.2013    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вам вообще не нужны идентификаторы для доступа к маркерам, заполнения боковой панели при создании маркера и сохранения маркера как свойства HTML-элемента:

Пример кода (заставляет маркер подпрыгивать при наведении курсора на элемент на боковой панели):

var i = 0,
    sidebar = document.getElementById('sidebar');

var item    = document.createElement('div');
    item.innerHTML='Marker#'+(++i);
    item.marker=new google.maps.Marker({/*your marker-properties*/});
    item.onmouseover=function(){this.marker.setAnimation(google.maps.Animation.BOUNCE);};
    item.onmouseout=function(){this.marker.setAnimation(null);};
    sidebar.appendChild(item);
person Dr.Molle    schedule 14.09.2013
comment
Я ценю ваш комментарий, но на данном этапе изменение функции, создающей список маркеров, невозможно. Мне действительно нужно было бы выбрать маркер по его идентификатору, не зацикливая каждый маркер. - person user2543462; 17.09.2013

arrow_upward
1
arrow_downward

Лучший способ, который я нашел, - сохранить экземпляр каждого маркера в массиве. Итак, у вас есть массив данных маркеров в вашем серверном скрипте, который вы используете для создания JavaScript и бокового меню. Создание массива JavaScript для хранения всех объектов маркеров карты Google. Так что, если все сделано правильно, индекс будет совпадать. Таким образом, вы можете ссылаться на объект маркера в массиве JavaScript с тем же индексом маркера.

PHP

$markers = new array( );
$markers[0] = array('lat'=>'-30.00000', 'lon'=>120.00000, 'title'=>'Maker 0');
$markers[1] = array('lat'=>'-31.00000', 'lon'=>121.00000, 'title'=>'Maker 1');
$markers[2] = array('lat'=>'-32.00000', 'lon'=>122.00000, 'title'=>'Maker 2');

//write the JS
echo '<script>';
/*
   bunch of google map code here
 */

 //start to add in markers
 echo 'var gm_markers = new Array( );
 ';
foreach($marker as &k=>$m){
  echo ' gm_markers['.$k.'] = new google.maps.Marker({
                  /* maker options here */
              });
}
echo '</script>';

Итак, теперь у вас есть массив маркеров JavaScript с индексами массива, которые соответствуют массиву маркеров PHP. Тогда ссылка проста!

//loop again for the list
echo '<div id="sidebar">';
foreach($marker as $k=>$m){
    echo '<div id="marker_'.$k.'" onmouseover="gm_markers['.$k.'].setAnimation(google.maps.Animation.BOUNCE);">'.$k.'</div>';
}
echo '</div>';

Есть смысл? Таким образом, вы можете использовать индекс из массива для доступа к создателям в JavaScript. Я всегда использую этот метод.

person Shane    schedule 07.11.2013

arrow_upward
0
arrow_downward

Я нашел это красивое и простое решение в упомянутом вами URL-адресе (http://www.geocodezip.com/v3_MW_example_hoverchange. HTML)

  • добавить событие мыши к элементу html, которое вызовет подсветку. Пример: добавлено в таблицу:

<table onmouseover="markers[ID].setIcon(image_hover_url)" onmouseout="markers[ID].setIcon(image_url)">...</table>

намеки:

  • маркеры vars, image_url и image_url_hover должны быть глобальными переменными javascript.
person guillefd    schedule 23.11.2013