谷歌地图智能信息窗口位置

Question

我正在尝试将 Google 地图中的信息窗口更改为智能信息窗口，但由于某种原因，信息窗口的位置错误。标准信息窗口我从来没有遇到过这个问题，只有智能信息窗口。

我发现，如果我使用 Firefox 检查器删除 position: relative，地图将移动到窗口的左上角，然后 smartinfowindows 处于正确的位置。

那么我有什么遗漏吗？

我使用以下内容创建标记：

for (var i = 0; i < data.locations.length; i++) {

    var dataPhoto = data.locations[i];
    var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);

latlngbounds.extend( latLng );

var marker = new google.maps.Marker({
    position: latLng,
    icon: 'http://www.irishcottageholidays.com/images/cottage1.png'
}); 

listenMarker(map,marker,InfoWindow,dataPhoto.mID)

    markers.push(marker);
}

然后创建智能信息窗口：

function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
    load_content(map,this,InfoWindow,mID);
});

function load_content(map,marker,InfoWindow,mID){
    var $j = jQuery.noConflict();
    $j.ajax({
        type : 'GET',
        url : '/ajax/map_popup.asp',
        data: {
            mID : mID
        },
        success: function(result){
            new SmartInfoWindow({position: marker.getPosition(), map: map, content: result});
        }
    });
}

最初我使用以下方法创建信息窗口：

InfoWindow.setOptions({
    disableAutoPan: true,
    maxWidth: 280
});
InfoWindow.setContent(result);
InfoWindow.open(map, marker);

这有效，但现在我已更改为 smartinfowindow，它加载了 infowindow 但位置不正确。

提前感谢所有帮助。

---- 编辑----

我现在遇到一个问题，即在打开另一个时 smartinfowindow 没有关闭，并且到目前为止还无法实现。到目前为止，我发现的所有内容似乎都适用于标准信息窗口，并且不适用于智能信息窗口。

再次感谢您提前提供的所有帮助。

Answer 1

我认为您应该通过编辑 smartinfowindow.js 文件来更改 smartinfowindow 属性。

Answer 2

我已经通过Experts Exchange 找到了解决方案。

Smartinfowindow定位解决方案：

SmartInfoWindow 创建一个 div 来包含信息窗口的内容并将其附加到正文中。它的位置设置为相对于身体的绝对位置。它假定您的地图位于文档的左上角。

简单的解决方案是将 SmartInfoWindow 相对于地图画布而不是主体进行绝对定位。为此，您必须在第 178 行编辑 smartinfowindow.js 文件。

代替：

document.body.appendChild(div);

替换为：

var mapDiv = document.getElementById("map");
mapDiv.appendChild(div);

以“map”作为保存地图的 div 的 id。

打开一个新窗口时删除智能信息窗口：

function listenMarker (map,marker,InfoWindow,mID){
    google.maps.event.addListener(marker, 'click', function() {
        if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
        load_content(map,this,InfoWindow,mID);
    });
}

地点：

if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }

已添加到我的代码中

假设您已经在页面上安装了 jquery，并且没有其他谷歌地图插件在地图 div 中创建 div。

这两种解决方案都归功于 tommyBoy 在 Experts Exchange 上的贡献。