2

我正在使用 jquery ajax 从解析 xml 文档的 php 脚本中获取一些结果。在那个 ajax 调用之后，我想在那个 php 脚本创建的 div 中显示来自 google api 的地图（这是我的问题）。

在ajax调用之后，是否可以将地图API加载到<div id="map-canvas">在php中创建的？

PHP文件

    ... $xmlData = simplexml_load_file("using an http service");            
    echo "<div id='map-canvas'></div>";  //LOAD MAPP HERE!
    echo "<ul>";
    foreach($xmlData->StopTimes->StopTime as $stopTime){
        echo "<li>",$stopTime->attributes()->Hour,"</li>";
    }
    echo "</ul>";
}

AJAX 文件

...
    //station click, show next stops
    $('.station_link').click(function(){
        var station_text = $(this).text();
        $.ajax({                                //make the ajax call
            type: "POST",                       //use POST/GET
            url: "../server_side/nextStop.php", //file to send data
            data: {poststation : station_text},         //postlink -> php($_POST) value / text -> jquery var value
            success: function(data){            //on success, do something
                $('#next_stop').html(data);
                $('#next_stop').show();

            //Google maps API
                 function initialize() {
                      var mapOptions = {
                        zoom: 8,
                        center: new google.maps.LatLng(-34.397, 150.644),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                      }
                      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                    }

                    function loadScript() {
                      var script = document.createElement("script");
                      script.type = "text/javascript";
                      script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
                      document.body.appendChild(script);
                    }

                    loadScript();
            }   
            });
        });
    });

这是我尝试过的（还有更多：p），但我什至不知道它是否只是错误的。

任何帮助或建议将不胜感激！

- 更新 -

就这么简单：

文件

//station click, show next stops
    $('.station_link').click(function(){
        var station_text = $(this).text();
        $.ajax({                                //make the ajax call
            type: "POST",                       //use POST/GET
            url: "../server_side/nextStop.php", //file to send data
            data: {poststation : station_text}, //postlink -> php($_POST) value / text -> jquery var value
            success: function(data){            //on success, do something
                $('#next_stop').html(data);
                $('#next_stop').show();


                // Google maps API
                var mapOptions = {
                    center: new google.maps.LatLng(37.7831,-122.4039),
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

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

            }   
            });
        });
    });

只需将其添加<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>到 HTML 文件中。

这就是我想要的，它<div id="map-canvas">应该加载。

无论如何，Ty 寻求帮助！对不起，如果我没有早点证明我的观点，我有点新手;）

4

3 回答 3

4

Google Maps 必须在您调用时加载center: new google.maps.LatLng(-34.397, 150.644),，所以我认为您应该创建一个虚拟地图并在页面加载时对其进行初始化

<div id="dummy"></div>
<script type="text/javascript">

function initGoogle(){
    myLatLng = new google.maps.LatLng(0,0);
    var mapOptions = {
        zoom: 1,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById('dummy'), mapOptions);
}

$(document).ready(function(){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'googleMaps';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initGoogle';
    document.body.appendChild(script);
});

</script>

<style type="text/css">
    #dummy { position: absolute; top: -5000px; left: -5000px; }
</style>

然后你可以绑定任何你想要的。

注意：我使用了 jQuery $(document).ready()，但如果你不使用 jQuery，你可以弄清楚。

于 2013-07-12T13:26:47.770 回答
1

我怀疑initialize由于范围问题您没有被调用，因为它仅在 Ajax 回调的范围内定义，而不是 Maps SDK 所期望的全局范围。

如果您必须异步加载 Google Maps JS，请使用jQuery.getScript()然后在getScript的回调中初始化您的地图。

但这可能会更好，因为您有效地链接了两个请求，这并不是特别高效。

你可以：

  • 创建一个全局变量集0
  • 触发 Maps div 的 Ajax 调用
  • 用于getScript异步和并发加载 Maps SDK
  • 在您的 Ajax 和 getScript 调用的回调函数中，增加您刚刚设置的全局变量
  • 有一个每 50 毫秒左右运行一次的循环（例如setTimeout递归调用2
  • 一旦满足上述条件，请初始化您的地图，因为您知道 div 和 maps API 都已加载
于 2013-07-12T13:40:02.993 回答
-2

你可以在 AJAX 调用之后调用一个 js 函数。您可能最好在 AJAX 调用之外的某个地方定义 gmap 的初始化函数，然后在成功调用您的 php 脚本后调用您的 gmap 函数（以防对setTimeout('gmap()', 2000);函数的高需求）。但是当我看到你的脚本时，它首先创建 div 然后调用 gmap 的函数

于 2013-07-12T13:25:06.923 回答