Javascript 从谷歌地图外部打开信息窗口
有没有办法从外面的桌子上打开标记的信息窗口。我在“stackoverflow”中也看到了其他用户的帖子,这似乎有点棘手 这是我使用的代码。在最后2行代码中,我将tweets添加到一个表中,如果我想点击任何tweets,它应该在地图上打开相应的标记。问题是我不知道如何链接标记和表行Javascript 从谷歌地图外部打开信息窗口,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,有没有办法从外面的桌子上打开标记的信息窗口。我在“stackoverflow”中也看到了其他用户的帖子,这似乎有点棘手 这是我使用的代码。在最后2行代码中,我将tweets添加到一个表中,如果我想点击任何tweets,它应该在地图上打开相应的标记。问题是我不知道如何链接标记和表行 function geocode(user, date, profile_img, text, url, location) { var geocoder = n
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);
功能地理编码(用户、日期、配置文件、文本、url、位置){
var geocoder=new google.maps.geocoder();
地理编码({
地址:地址
},功能(响应、状态){
if(status==google.maps.GeocoderStatus.OK){
var x=响应[0]。几何体。位置。lat(),
y=响应[0].geometry.location.lng();
var mylatng=new google.maps.LatLng(x,y);
var marker=new google.maps.marker({
图标:profile_img,
标题:用户,
地图:地图,
位置:myLatLng
});
var contentString='+'+'+'+''+用户+'+'+''+文本+'+'+'发布日期-'+Date+'.'+';
var infowindow=new google.maps.infowindow({
内容:contentString
});
google.maps.event.addListener(标记,'click',函数(){
信息窗口。打开(地图、标记);
});
$('#用户tweets').css(“溢出”、“滚动”);
$(“#用户推文”).append(“”+user+“”+text+“”
”);
功能信息窗口(地图、标记){
信息窗口。打开(地图、标记);
}
扩展(myLatLng);
AKU 47
假设未闭合的括号和花括号在提供的代码之后都闭合
首先,在外部范围内为冗长的HTML字符串制作模板,例如,在函数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 />';
您将看到函数openInfoWindow()
不接受参数。相反,它通过闭包拾取map
和marker
(它们在外部范围中定义)。这允许openInfoWindow
在两个位置按名称附加-作为marker click和tweet click的处理程序(这就是你想要的)
这可能不是100%正确,因为我必须做出假设,但它至少应该让你知道如何解决这个问题。由于括号和花括号失去平衡,很难理解变量/函数的范围。谢谢你:)稍后我会看一看,然后告诉你。谢谢!!从#用户tweet div打开信息窗口正在工作,但是当tweet加载到div中时出现问题。只有结果中的最后一条tweet显示在div上。你知道为什么会发生这种情况吗?
geocode()
似乎是为了在每次调用函数时插入一条tweet并创建一个标记和一个信息窗口而编写的。如果出现多个标记,但只有一条tweet,那么问题一定是geocode
内部的问题。如果只有一个标记和一条tweet出现,那么geocode
似乎只被调用一次——即问题所在lem很可能位于geocode
的外部。明白了,我必须将模板声明放在geocode函数中:)好的,这很酷,尽管模板
如果粘贴到“右侧”中,应该可以从外部范围继续使用地点。如果没有看到所有的代码,很难说确切的位置。顺便说一句,我忘了从模板[1]
中删除onclick=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);