[英]How do I link Google Maps Markers to other elements?
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. 使用谷歌地图 (和JavaScript)我已经能够轻松地显示几个标记,每个标记都有一个很好的小信息窗口。
//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);
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.
例如,我想有一个带有标记infowindow内容副本的侧边栏。 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.
我甚至可能希望单击侧边栏内容在地图上打开给定的标记infowindow。
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. 问题是GMarker点击事件只传递纬度/经度 - 我不知道如何使用它来找到匹配的div或其他什么。
How do I get a unique id/handle for each marker? 如何为每个标记获取唯一的ID /句柄?
Assign an id to each marker and its corresponding element in the sidebar. 为每个标记及其侧栏中的相应元素指定一个id。 Create an event listener to call that id.
创建一个事件监听器来调用该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...
});
}
See also this question . 另见这个问题 。
For those interested there is a great example of l inking dom elements with markers given here. 对于那些感兴趣的人来说,有一个很好的例子,就是用这里给出的标记来标记dom元素 。 Basically you just create a global JS array that holds a reference to each marker object.
基本上,您只需创建一个全局JS数组,该数组包含对每个标记对象的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.