Как я могу сделать отскок маркера при наведении курсора на внешний div? - PullRequest
Новая
       18

Как я могу сделать отскок маркера при наведении курсора на внешний div?

0 голосов
/ 13 июня 2019

Я пытаюсь создать страницу, на которой слева перечислены свойства, которые будут сдаваться в аренду, и они отображаются справа через API Карт Google.Пока что у меня есть все свойства слева (все фиктивные данные сейчас, но они генерируются динамически), а затем справа, Google Maps APi выводит все данные (также динамически).Пример страницы содержит около 20 маркеров.Сейчас я собираюсь сделать следующее: всякий раз, когда кто-то наводит курсор мыши на свойство слева, я хочу отразить маркер на карте, чтобы люди знали, какой из них открыть.

Моя страница разработчика находится по адресу: https://www.commercialrealestate -portland.com / available-now /

Я попробовал несколько предложений, но ни одно из них не сработало.Исходя из моих исследований, похоже, что мне нужно назначить идентификатор для каждой отдельной карты Google Maps marker , чтобы я мог затем вызвать отскок при наведении курсора на div.

Я былдумая, что я бы поместил что-то вроде этого в каждом элементе слева: 

<div class="listingBox" onmouseover="marker['unit145_the_waterman_building'].setAnimation(google.maps.Animation.BOUNCE);"></div>

Но я не уверен, сработает ли это.Когда я захожу в консоль, я получаю необработанную ссылку: маркер не определен.

Чтобы получить свои маркеры, я строю массив местоположений (заголовок / etc, широта, долгота,и удостоверение личности).Затем я перебираю эти местоположения и выполняю: 

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: locations[i][3]
    })

Но я не думаю, что идентификатор (который является значением в местоположениях [i] [3]) переносится, как onmouseoverне работает

На самом деле, я даже не уверен, что этот подход лучше.На самом деле, моя основная задача заключается в следующем: у меня есть свойства X (div) слева (они всегда будут меняться, так как они управляются данными), и я хочу иметь возможность отражать маркер карты этого div справа.Я открыт для любых предложений - предлагаемых исправлений вышеупомянутых, ссылок, которые могут помочь, или различных подходов в целом.

1 Ответ

0 голосов
/ 13 июня 2019

Я проверил сообщение об ошибке в журнале консоли вашего сайта. "Uncaught ReferenceError: маркер не определен"

Вы проверили код, который вы определили, это означает, что onmouseover не работает. 

marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: gmid
});

Вы должны внести эти изменения

1: HTML-код. 

<div class="listingBox" onmouseover="marker['unit189_ankeny_building'].setAnimation(google.maps.Animation.BOUNCE);">

изменить на 

<div class="listingBox" id="unit189_ankeny_building">

2: код Javascript. 

var gmid = locations[i];

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: _mid[3]
});
(function(_mid, _marker){
$('#' + _mid[3]).on('mouseover', function){
      _marker.setAnimation(google.maps.Animation.BOUNCE);
});
})(gmid, marker);

Обновление 1 См. Мой пример: https://jsfiddle.net/a5s07frj/

...