Question

我正在开发一个简单的地图来显示我所在地区的商业地点。我有一个主页面（map.php），它包含地图，我还创建了一个页面（business.php），显示有关特定业务的更多信息，如一些图像，评论等。

我需要在信息框（infowindow）上有一个链接，它将使用AJAX / jQuery动态链接到此页面。我还希望能够将所选业务的值（点击的图标）从map.php传递给business.php，以便我可以显示和/或操作它们。我可以通过将URL上的值传递到php页面来轻松实现。但是我不想离开主页面，我只想要弹出业务页面。我该怎么做？这是我的JavaScript代码：

function getLocations (url) {
    downloadUrl(url, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var pic = markers[i].getAttribute("image");
            var link = markers[i].getAttribute("link");
            var details = markers[i].getAttribute("details");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<div id='content'>" + name + "</b> <br />" + '<img src="' + pic + '"/>' + "  </b> <br/>" + address + '</b> <br /> <a href="business.php">View More Information</a></div>';
            var icon = customIcons[type] || {};
            var marker = new MarkerWithLabel({
                position: point,
                draggable: false,
                raiseOnDrag: false,
                map: map,
                labelContent: type,
                labelAnchor: new google.maps.Point(30, 65),
                labelClass: "labels", // the CSS class for the label
            });
            bindInfoWindow(marker, map, infoWindow, html);
        }
    });
}

当用户点击“查看更多信息”链接时，我希望business.php页面动态弹出。

Answer 1

正确答案是：取决于。你想如何展示这些信息？你想要打开一个新窗口吗？

如果您想/需要/喜欢打开新窗口，只需使用target标记的<a>属性即可。像这样：<a href="business.php" target="business">View More Information</a>。 target是您要打开的窗口的名称（如here中所示）。如果您愿意，您甚至可以使用javascript操作该窗口（位置，大小等）。这在技术上是一个弹出窗口，因此您的一些客户端浏览器配置可能不喜欢它。
另一方面，如果您希望在同一页面上显示business.php，请使用fancybox或lightbox之类的解决方案，其中包含嵌入式iframe这样您就可以在后台看到原始页面（变暗且无法访问）并仍然可以看到您的商家页面。您甚至可以通过creaftinf页面在没有iframe的情况下离开，以便您使用ajax加载business.php页面并替换某些div /的内容以包含该新HTML。
您还可以创建动态iframe以呈现business.php页面等。

有很多选项，您应该根据您的要求和每个解决方案对问题的适用性仔细检查使用哪一个（例如，如果用户阻止打开新窗口会发生什么情况）。

Answer 2

你需要“hijax”这些链接。我能想到的最简单的方法就是这样：

// When clicking any link
$('a').live('click', function (e) {
    var clicked = $(this);

    // Make sure a bussiness.php-link was clicked
    if (clicked.attr('href').indexOf('business.php') != -1) {
        // Grab the page with ajax
        $.get(clicked.attr('href'), function (data) {
            alert(data);
        });

        return false;
    }
});

编辑：您很可能想将警报（）更改为灯箱或更高级别的东西。

使用AJAX / jQuery弹出页面

2 个答案: