Question

我使用谷歌地图的实现，在地图上加载由PHP脚本确定的位置的标记，允许用户根据搜索条件动态过滤兴趣点。这是通过对php搜索脚本的ajax调用完成的。这些标记还有一个附加的infoWindow，通过访问不同的php脚本动态加载有关该站点的详细信息。在标记创建过程中，我使用以下代码：

// Initialize the info window
var InfoWindow = new google.maps.InfoWindow({ content: 'Display Error: Please Try Again', maxWidth: 400 });

// Lots of code to prep the search filters and now inside an $.ajax().done(function(html) { $('#ajaxStub div.stubCalc').each(function() {  } }) method

var newMarker = new google.maps.Marker({
    position: latlon,
    icon: $(this).find('.iconStub').text(),
    title: $(this).find('.nameStub').text(),
    map: gmap
});
// onClick show the InfoWindow
google.maps.event.addListener(newMarker, 'click', function(e) {
    InfoWindow.content = $('<div class="projectStub" guid=""></div>').attr('guid', guid).get(0);
    InfoWindow.open(gmap, newMarker);
    // loadStub(div, guid, [isToolbox], [callback()]) is defined in CalcInfo.js so that it can also be used by the Calculator Toolbox Page
    loadStub($('div.projectStub[guid="' + guid + '"]').get(), guid, false, function() {
        InfoWindow.setContent(InfoWindow.content);
    });
});

你可以看到loadStub方法进行初始的ajax调用，并为文件上传的ajax调用做准备（因此这个infowindow的内容非常动态）

function loadStub(project, guid, isToolbox, callback) {
    if (typeof(isToolbox) === 'undefined') isToolbox = false;
    $(project).html('<img src="/Styles/images/ajax-loader.gif"/>');
    $.ajax({
        url: "/ajax.php?ajax=CalcInfo",
        type: "POST",
        data: { guid: guid, isToolbox: isToolbox.toString() },
        cache: false
    }).done(function(html) {
        $(project).html($(html).html());
        $(project).find('#fileInput').change(function() {
            // More code here to prepare for ajax upload
            $.ajax({
                url: "/ajax.php&ajax=Thumbnail&guid=" + guid,
                type: "POST",
                data: formdata
            }).done(function(html) {
                if ($(html).find('#ajaxContent .error').length > 0) {
                    var errorMessage = 'The Server Returned the Following Error(s):\n';
                    $(html).find('#ajaxContent .error').each(function() {
                        errorMessage += $(this).text() + '\n';
                    });
                    errorMessage += 'Please Try Again';
                    alert(errorMessage);
                }
            }).fail(function() {
                alert('There Was an Error Connecting to the Server. Please Try Again.');
            }).always(function() {
                loadStub();
            });
        });
        if (typeof callback == 'function') {
            callback();
        }
    }).fail(function() {
        $(project).html('<div style="margin: 75px 0; text-align: center;">There Was an Error Connecting to the Server<br/>Please Try Again</div>');
    });
}

我能够确定通过使用setContent方法而不是分配InfoWindow.content谷歌地图会适当调整InfoWindow大小，但它不会平移地图以适应InfoWindow的内容，因为它在使用时默认InfoWindow.open（）。有没有人知道一个体面的解决方案？

如果我需要澄清任何事情，请告诉我。

提前致谢。

Answer 1

尝试调用InfoWindow.open（gmap，newMarker）;再次将内容设置为ajax结果之后。根据内容大小调用open方法时，地图将自动平移，这似乎是一种可用的解决方法。

Answer 2

即使您的infowindow内容是动态的，您也可以选择在加载内容时接近值的宽度和高度值。

InfoWindow.content = $('<div class="projectStub" guid=""></div>').attr('guid', guid).get(0);

这里尝试给projectSub一个宽度和高度值。

您可以做的另一件事：将地图移动到具有活动信息窗的标记位于中心的位置。这样，标记会在用户点击后移动一点，但您的信息窗肯定会完全可见。

loadStub($('div.projectStub[guid="' + guid + '"]').get(), guid, false, function() {
    InfoWindow.setContent(InfoWindow.content);
    gmap.panTo(newMarker.getPosition());
});

加载来自ajax的内容后，自动平移映射以适合infoWindow

2 个答案: