获取要在用户单击 gmap3 上的点时作为弹出窗口加载的页面 - Get page to load as a popup window when user clicks on point on gmap3

Get page to load as a popup window when user clicks on point on gmap3

最重要的是，我真的很希望它也淡入。我现在的代码允许我做所有这些事情，但它并不像我希望的那样高效，因为 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();
            }
        }
    }
}

现在我尽力自己解决问题，但当我确实需要帮助时，我会来这里。提前感谢堆栈溢出蜂巢的头脑。

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

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

虽然从你上面的评论听起来你正在寻找对 AJAX 更友好的东西。在模态div 中显示的内容比在弹出窗口中显示的内容更多。 jQuery .load()函数应该能够处理你已经拥有的元素。不知道您的标记，我无法准确，但它可能看起来像这样：

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 回调服务器以重新获取相同内容之间取得平衡取决于您。