如何将Google地图标记链接到其他元素？ [英] How do I link Google Maps Markers to other elements?

问题描述

使用谷歌地图（和JavaScript）我一直在能够轻松显示多个标记，每个标记都有一个漂亮的小信息窗口。

Using the google maps (and JavaScript) I have been able to easily display several markers which each have a nice little info window over them.

//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);

//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);
}

var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);

但是，我现在希望能够将标记的点击链接到可以更新的功能页面的其他部分也是如此。例如，我想有一个带有标记infowindow内容副本的侧边栏。同样的方式 google地图显示左侧的结果和右侧的标记。我甚至可能希望单击侧边栏内容在地图上打开给定的标记infowindow。

However, I now want to be able to link the "click" of markers to functions which can update other parts of the page as well. For example, I would like to have a sidebar with copies of the marker infowindow content. The same way google maps shows results on the left and markers on the right. I might even want the click of sidebar content to open a given marker infowindow on the map.

问题是 GMarker 点击事件只传递了lat / long - 我不知道如何使用它来查找匹配div或其他。

The problem is that the GMarker click event only passes the lat/long - and I'm not sure how I can use that to find the matching div or whatever.

如何获得每个标记的唯一ID /句柄？

How do I get a unique id/handle for each marker?

推荐答案

为每个标记及其侧栏中的相应元素分配一个id。创建一个事件监听器来调用该id。这样的事情：

Assign an id to each marker and its corresponding element in the sidebar. Create an event listener to call that id. Something like this:

var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)

//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);

    GEvent.addListener(marker, 'click', function(latlng) {
        var div = document.getElementById(id); //access the sidebar element
        // etc...
    });
}

参见这个问题。

这篇关于如何将Google地图标记链接到其他元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！