【问题标题】:Place Javascript returned from server放置从服务器返回的 Javascript
【发布时间】:2012-10-21 15:53:14
【问题描述】:

我有以下代码可以从服务器获取一些 Javascript:

        $.ajax({
            url: '<?=base_url()?>index.php/guide/getMap',
            success: function(data) {
                $('.result').text(data);
                alert('Load was performed.');
            }
        });

这样就成功返回了我想要的代码:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[

        var map; // Global declaration of the map
        var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
        var lat_longs = new Array();
        var markers = new Array();
        function initialize() {

             var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP}
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        }


    function createMarker(markerOptions) {
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        lat_longs.push(marker.getPosition());
        return marker;
    }

        window.onload = initialize;

        //]]>
</script>

我的问题是,代替我目前在 succsufull 回调中的警报,我怎样才能将此 javascript 放置在 HTML 文档的正文(或头部)中,以便显示 Google 地图? (注意:我还会有另一个 ajax 调用来返回所需的 html)。

我不只是直接使用 JS 调用 GMaps API 的原因是我需要在服务器上进行一些处理以从数据库中获取适当的标记以放置在地图上等。我正在使用 @987654321 @服务端的库,生成显示地图所需的js/html。

【问题讨论】:

  • 你看过$.getScript()吗?
  • 我没有,但这看起来需要一个 js 文件的 url,我指向一个动态生成 js 的 php 文件。
  • 所以你所拥有的一个 JS 文件的 url - 几乎。它的末尾可能没有filename.js,但它是一个返回JS的URL - 是否是动态生成的并不重要吗?除了 JS 文件中没有脚本标签。您可以通过使用 $.getScript() 来获取 Google JS 文件并在成功时再次调用 $.getScript() 以获取 your JS... 来解决这个问题

标签: php jquery codeigniter google-maps-api-3


【解决方案1】:

不要让你的初始化函数在任何地方,而是将它与你的回调函数联系起来,做一些类似的事情:

$.ajax({
    url: '<?=base_url()?>index.php/guide/getMap',
    success: function(data) {

        function initialize() {
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var mapCanvas = document.getElementById("map_canvas");
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP}
                map = new google.maps.Map(mapCanvas, myOptions);
        }
    }
});

您当然可以移动东西,让它们看起来很漂亮,或者您喜欢它的布局。重要的是,在从地图取回数据并加载地图 API 之后调用初始化函数。

【讨论】:

  • 但是那个数据例如。纬度/经度来自数据库,因此客户端不知道...
【解决方案2】:

试试这个。我认为这会起作用。将以下代码放在页面底部:

 $.ajax({
                url: '<?=base_url()?>index.php/guide/getMap',
                success: function(data) {
                    $('.result').text(data);
                    initialize();
                }
            });

【讨论】:

    猜你喜欢
    • 2020-10-16
    • 2014-09-20
    • 1970-01-01
    • 1970-01-01
    • 2017-01-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多