有什么方法可以从外部表打开标记的信息窗口。我也在“stackoverflow”中看到了其他用户的其他帖子,完成起来似乎有点棘手。
这是我使用的代码。在最后两行代码中,我将推文附加到一个表中,如果我想点击任何推文,它应该会在 map 上打开相应的标记。问题是我不知道如何链接标记和表格行。
function geocode(user, date, profile_img, text, url, location) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: location
}, function (response, status) {
if (status == google.maps.GeocoderStatus.OK) {
var x = response[0].geometry.location.lat(),
y = response[0].geometry.location.lng();
var myLatLng = new google.maps.LatLng(x, y);
var marker = new google.maps.Marker({
icon: profile_img,
title: user,
map: map,
position: myLatLng
});
var contentString = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">' + user + '</h2>' + '<div id="bodyContent">' + text + '</div>' + '<div id="siteNotice"><a href="' + url + '"></a></div>' + '<p>Date Posted- ' + date + '.</p>' + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
$('#user-tweets').css("overflow","scroll");
$('#user-tweets').append('<table width="320" border="0"><tr><td onclick=infoWindow(map,marker); colspan="2" rowspan="1">'+user+'</td></tr><tr><td width="45"><a href="'+profile_img+'"><img src="'+profile_img+'" width="55" height="50"/></a></td><td width="186">'+text+'</td></tr></table><hr>');
function infoWindow(map,marker){
infowindow.open(map, marker);
}
bounds.extend(myLatLng);
最佳答案
ak_47,
假设未闭合的括号和花括号都在提供的代码之后关闭......
首先在外部范围内为冗长的 HTML 字符串制作模板 - 即。在 function geocode(){}
之外 - 它们被定义一次的地方,而不是每次都需要它们的时候。
var templates = [];
templates[0] = '<div><div></div><h2 class="firstHeading">%user</h2><div>%text</div><div><a href="%url"></a></div><p>Date Posted- %date.</p></div>';
templates[1] = '<table width="320" border="0"><tr><td class="user" colspan="2" rowspan="1">%user</td></tr><tr><td width="45"><a href="%profile_img"><img src="%profile_img" width="55" height="50" /></a></td><td width="186">%text</td></tr></table><hr />';
您会看到我删除了 ID,否则每次使用模板时都会重复这些 ID。重复时 ID 会失去用途。
然后将 var contentString = ...;
到 function infoWindow(map,marker){...}
的所有内容替换为:
var infowindow = new google.maps.InfoWindow({
content: templates[0].replace('%user',user).replace('%text',text).replace('%url',url).replace('%date',date);
});
var $tweet = $(templates[1].replace('%user',user).replace(/%profile_img/g,profile_img).replace('%text',text));
$('#user-tweets').css("overflow","scroll").append($tweet);
function openInfoWindow() {
infowindow.open(map, marker);
}
google.maps.event.addListener(marker, 'click', openInfoWindow);
$tweet.find(".user").on('click', openInfoWindow);
您会看到 函数 openInfoWindow()
不接受参数。相反,它通过闭包获取 map
和 marker
(它们在外部范围中定义)。这允许 openInfoWindow
在两个地方按名称附加 - 作为标记点击的处理程序 和 推特点击(这是你想要的)。
这可能不是 100% 正确,因为我必须做出假设,但它至少应该让您了解如何解决问题。
关于javascript - 从谷歌地图外部打开信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12222920/