谷歌地图信息窗口在地图外点击打开答案

【问题标题】：Google Maps InfoWindow open on Click outside of Map谷歌地图信息窗口在地图外点击打开
【发布时间】：2011-12-01 16:13:06
【问题描述】：

所有，我有以下代码来添加标记：

function addPoints( points )
{   
for ( var p = 0; p < points.length; ++p )
{
    var pointData = points[p];
    if ( pointData == null ) return; 
    var point = new GLatLng( pointData.latitude, pointData.longitude );
var marker = createMarker( point, icon0, pointData.html );
map.addOverlay( marker );
}
}

function createMarker(point, icon, popuphtml) {
//alert("the create marker is: "+point);
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(popuphtml);
});
return marker;
}

我有一些 PHP/Javascript 可以将信息传递给这个函数：

$lat = $resultset_vendors['vendor_latitude'];
$long = $resultset_vendors['vendor_longitude'];
$name = $resultset_vendors['vendor_name']. "<br/>" . $resultset_vendors['vendor_address1']
. "<br/>" . $resultset_vendors['vendor_city'] . ", " . $resultset_vendors['vendor_state'] . " " . $rs['vendor_zip'];
$jsData = $jsData . "    new Store( $lat, $long, '$name' ),\n";


function Store( lat, long, text )
{
this.latitude = lat;
this.longitude = long;
this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];

我的数据成功传递，一切看起来都很好，除了在 Maps div 内打开了弹出框。如何在地图 div 之外打开它？可以在 yelp 上找到一个很好的例子。如果您将鼠标悬停在他们地图中的标记上，它会在地图 div 之外打开。

【问题讨论】：

标签： javascript css google-maps html openinfowindowhtml

【解决方案1】：

Google 地图信息窗口在 div 内打开，我刚刚检查了 Yelp，它们也在地图内打开。如果您想要一个外部弹出窗口，您可能需要编写一个函数来创建一个附加在地图之外的弹出窗口，然后绝对定位在该点。问题是包含地图的div的溢出设置为隐藏。

【讨论】：

是的，overflow: hidden 是个问题，它可能必须保持设置，以便地图外的图块不可见。
我同意必须设置它。这就是为什么 OP 必须在地图的 div DOM 之外创建一个弹出窗口。您提供的链接肯定会有很大帮助。
@TomasT。我不需要外部弹出窗口。我只是在寻找与 Yelp 相同的最终结果。我没有意识到它在 div 内部打开，因为它看起来在它之外。你是说设置溢出：div的隐藏？
@user1048676, overflow:hidden 已设置。 “我不需要外部弹出窗口” - 我们只是在这里得出结论，如果您不希望 infoWindow 被地图 div 边界裁剪，您将不得不这样做。

【解决方案2】：

您可以像他们在这里为静态地图所做的那样构建自己的 infoWindow：http://www.appelsiini.net/projects/php_google_maps/controls.html?center=58.37917285%2C26.74759984&infowindow=&zoom=14

我认为您也可以将其调整为与动态 (javascript) 地图一起使用...如果您正确处理了事件（如 bounds_changed 等）。

【讨论】：