0

最重要的是，我真的很希望它也可以淡入淡出。我的代码现在允许我完成所有这些工作，但它不如我希望的效率高，因为 PHP 页面在页面加载时立即加载。我希望 .php 页面在用户单击 gmap 上的点时初始加载。

这是我的一些代码供您消化：

    <?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蜂巢思想。

4

1 回答 1

0

你有几个选择。如果您想在传统的“弹出”窗口中打开某些东西，那么您可以简单地使用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 回调到服务器以重新获取相同内容之间取得平衡，这完全取决于您。

于 2013-10-06T11:08:45.830 回答