Как выделить маркеры при наведении курсора на Google Maps для сортировки таблицы?

У меня есть таблица, которую я сделал для сортировки с помощью подключаемого модуля jQuery Tablesorter 2.0. На той же странице у меня есть карта Google, на которой отображается маркер для каждого элемента в таблице. Теперь я хочу сделать так, чтобы при наведении курсора на <tr> выделялся соответствующий маркер на карте Google. Я также хочу сделать наоборот, когда щелчок по маркеру выделит строку таблицы.

Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как связать маркер со строкой таблицы. Я могу получить координаты и маркеры для каждого элемента, используя (в Javascript):

var list = [
    <% foreach (var item in Model) { %>
        new GMarker(new GLatLng(<%= item.Latitude %>, <%= item.Longitude %>)),
    <% } %> ];

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


google-maps jquery asp.net-mvc
person Daniel T.    schedule 29.09.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

  var n=gmarkers.length - 1;

  onclick='GEvent.trigger(gmarkers[' +n+ '],"click")'

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

Вам почти наверняка понадобится функция createMarker () для удержания закрытия функции для переменных, связанных с вашими маркерами, чтобы делать что-нибудь полезное с вашими маркерами после того, как вы связали их с записями таблицы.

person Mike Williams    schedule 29.09.2009
comment
Итак, чтобы уточнить, используйте jQuery для динамического присвоения идентификаторов строкам таблицы, чтобы при сортировке идентификатор перемещался вместе со строками? - person Daniel T.; 29.09.2009
comment
Это мое понимание того, как работает Tablesorter. Когда он меняет порядок строк в таблице, содержимое каждой строки сохраняется. Меняется только порядок строк в таблице. - person Mike Williams; 01.10.2009

arrow_upward
0
arrow_downward

Я бы посоветовал создавать каждую строку одновременно с созданием каждого маркера.

На каждой итерации цикла генерируйте идентификатор для этого маркера / строки. Добавьте идентификатор в строку и добавьте прослушиватель GEvent к маркеру с кодом, чтобы выделить строку с тем же идентификатором. Добавьте маркер в массив с индексом id.

Вы можете добавить слушателя для наведения курсора на строку, который получает идентификатор строки, который вы можете использовать для доступа к соответствующему маркеру из массива.

Если у меня будет время позже, я посмотрю, смогу ли я придумать какой-нибудь код.

person Chris B    schedule 29.09.2009

arrow_upward
0
arrow_downward

Взгляните на этот образец.

Таким образом вы подписываетесь на событие клиента.

@(
    Html.Googlemap()
        .Name("map")
        .Markers(m => m.Add()
                       .Id("marker-1")
                       .Title("Hello World!"))
        .ClientEvents(events => events.OnMapLoaded("onMapLoadHandler")) 
 )

<ul class="marker-list">
    <li data-id="marker-1">My Marker</li>
</ul>

и вот как вызвать щелчок по карте.

<script type="text/javascript">
        var markers = {};
        function onMapLoadHandler(args) {
            markers = args.markers;
        }
        $(".marker-list li").click(function () {
            var id = $(this).attr('data-id');
            google.maps.event.trigger(markers[id], 'click');
        });
</script>
person Juan M. Elosegui    schedule 03.08.2015