2

我使用 Google Maps JavaScript API 来显示地图 - https://developers.google.com/maps/documentation/javascript/

我需要该 API 中的某些功能，而这些功能是静态地图所没有的。

所以这个页面可以作为一个独立的页面正常工作：

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>


    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);


        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }


    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);



</script>

</head>

<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>

</html>

我需要让该页面在 jQuery 对话窗口中工作。

我调用对话框并像这样加载外部页面：

<script type="text/javascript">

    $(document).ready(function() {


        $("#cc").click(function(){

            $("#detailWin").dialog({
                autoOpen: false,
                modal: true,
                width:700,
                height:600,
                show: "fade",
                close: "fade",
                open: function ()
                {
                    $(this).load('p2.php');

                }
            });

            $('#detailWin').dialog("open");


        });

    });

</script>

因此，当我将第一组代码包含到 maps.php 页面时，它不起作用。我意识到我不想在包含的页面上包含所有和标签。我一直在尝试很多不同的方法，我无法在对话窗口中加载地图。

我尝试使用 jQuery 加载地图 API URL，$.getScript()但没有帮助。

如果有人可以帮助我找出使这项工作正常进行的最佳方法，我将不胜感激，因为我被困住了。

谢谢！

更新：

我最终让它像这样工作（这是第二页 maps.php）：

<script type="text/javascript">

$(document).ready(function() {

    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }

    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);


    initialize();

    });


 </script>


<div>

    <div id="map-canvas"style="width:600px; height:500px"></div>

</div>
4

3 回答 3

2

这里有两个重要的考虑因素：-

  • 确保所有 javascript/jQuery 都包含在父页面中。不要试图通过 AJAX 传递 js。
  • 确保仅当画布可见时才初始化地图。初始化一个不可见的画布只是部分成功。

根据您要执行的操作，您的代码可能是这样的：

$(document).ready(function() {
    var $detailWin,
        dialogInitialized,
        map;

    function getDialogContent() {
        if(dialogInitialized) return;
        dialogInitialized = true;//Well, at least initializing.
        $.get('p2.php').done(function(html) {
            $detailWin.html(html);
            var cord = new google.maps.LatLng(28.545078, -81.377196);
            var mapOptions = {
                zoom: 15,
                center: cord,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var marker = new google.maps.Marker({
                position: cord,
                map: map,
                title: 'Test'
            });
        }).error(function(jqXHR, textStatus, errorThrown) {
            $detailWin.text(textStatus);
        });
    }

    $detailWin = $("#detailWin").dialog({
        autoOpen: false,
        modal: true,
        width: 700,
        height: 600,
        show: "fade",
        close: "fade",
        open: getDialogContent
    });

    $("#cc").on('click', function() {
        $detailWin.dialog("open");
    });
});

备注：

  • 确保p2.php，提供一个包含地图画布的 HTML 片段，但没有<head>或<body>标签，绝对没有 javascript。
  • 上面的代码执行对话框（包括地图）的一次性初始化。如果您想在每次打开对话框时重新加载对话框（或它的某些方面，例如一组新的标记），情况会略有不同。
于 2013-05-14T19:49:24.903 回答
1

查看 Nemikor 的这篇博客文章，它应该可以满足您的需求。

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

基本上，在调用“打开”之前，您首先从另一个页面“加载”内容。

jQuery('#dialog').load('path to my page').dialog('open');

资源

于 2013-05-14T16:07:24.733 回答
0

如果你的页面就这么简单，可以考虑使用纯 JS 生成它。如果没有，如果您必须使用该load功能，请将您的 JS 脚本放在 page2 的正文中并使用$.load("page2.php body")

PS：考虑使用JS生成地图而不是使用load。这也将允许您将代码包装在代码库的简洁插件中，而不是重复代码。

于 2013-05-14T16:07:16.687 回答