Question

最重要的是，我真的很喜欢淡出。我的代码现在允许我做所有这些，但它不像我希望的那样高效，因为PHP页面在加载页面时立即加载。当用户点击gmap上的点时，我希望最初加载.php页面。

这是我的一些消化代码：

    <?php include("locations/clinton.php"); ?>

我知道“包含”是问题，但它根本不起作用。这是jquery：

latLng: [38.763711, -76.895458],
    data: "<div class='sum'><img src='images/clintonicon.png' width='144' height='144' alt='Clinton' /><p>Clinton, MD 20735<br>Churches: 0<br>Population: 36,208</p></div>",
    options: {
        icon: "images/clintonpin.png"
    },
    events: {
        click: function (marker, event, context) {
            $('#clinton').fadeIn('fast');
            $('.overlay').fadeIn('fast');
        },
        mouseover: function (marker, event, context) {
            var map = $(this).gmap3("get"),
                infowindow = $(this).gmap3({
                    get: {
                        name: "infowindow"
                    }
                });
            if (infowindow) {
                infowindow.open(map, marker);
                infowindow.setContent(context.data);
            } else {
                $(this).gmap3({
                    infowindow: {
                        anchor: marker,
                        options: {
                            content: context.data
                        }
                    }
                });
            }
        },
        mouseout: function () {
            var infowindow = $(this).gmap3({
                get: {
                    name: "infowindow"
                }
            });
            if (infowindow) {
                infowindow.close();
            }
        }
    }
}

现在我尽力自己解决问题，但是当我需要帮助时，我来到这里。先谢谢stackoverflow hive介绍。

Answer 1

您有几个选择。如果您想在传统的“弹出窗口”窗口中打开某些内容，则只需使用window.open()并将其指向所需的服务器端资源即可。像这样：

click: function (marker, event, context) {
    window.open('http://www.yourserver.com/locations/clinton.php');
}

虽然从你上面的评论中可以看出你正在寻找更适合AJAX的东西。在弹出窗口中显示更多模态div的东西。 jQuery .load() function应该能够使用您已有的元素处理此问题。如果不知道你的标记我就不能确切，但它可能看起来像这样：

click: function (marker, event, context) {
    $('#clinton').load('http://www.yourserver.com/locations/clinton.php', function () {
        $('#clinton').fadeIn('fast');
        $('.overlay').fadeIn('fast');
    });
}

您可能需要调整它以匹配您的标记，但一般的想法是：

页面上已经存在#clinton元素（可能是div？），但它是空的并且是隐藏的。
locations/clinton.php资源仅包含应该位于该元素内部的标记。

如果你有很多这些元素，那么随着用户点击各种标记，DOM将动态构建。如果这开始使页面太大，那么您也可以根据需要删除这些元素：

$('#clinton').empty();

如何在多个客户端内容和大量AJAX调用之间取得平衡，以重新获取相同的内容，这取决于您。

当用户点击gmap3上的点时，获取要作为弹出窗口加载的页面

1 个答案: