Question

我正在使用在PhoneGap上运行的jQuery mobile开发移动应用程序。面对我使用Google放置API + jquery UI地图的问题。问题是我只需要在加载特定页面时加载google maps API脚本。但似乎所有脚本都是在jQuery mobile中的第一个DOM加载时加载的。问题是我必须要求用户打开移动设备上的数据，否则会从jQuery UI地图脚本中抛出JavaScript错误。

在jQuery mobile中加载特定页面时，有什么方法可以动态加载Google Maps API脚本吗？

编辑：

我还要加载jQuery Ui映射相关的javascript文件，因此这就是复杂性产生的地方。感谢任何帮助..

编辑：添加代码示例;

<div data-role="page" id="showInfoPage" data-theme="a" data-close-btn="right">



                                <div data-role="header" data-theme="d">
                                                <h1>Information</h1>
                                </div>

                                <div data-role="content">

                                                <h1 id="elementName"></h1>

                                                <h2 id="elementAddress"></h2>             
                                                <a id="elementCallHos" data-role="button" class="tele" style="height:40px;"><span id="elementTele"></span></a>
                                                 <a id="elementCallHos1" data-role="button" class="tele" style="height:40px;display:none;"><span id="elementTele1"></span></a>
                                                <a id="elementGoogleMaps" data-role="button" class="googleMapsBtn" data-rel="page">Google Maps</a>

                                </div>



                </div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 

    <script type="text/javascript" src="js/jquery.ui.map.js"></script>
    <script type="text/javascript" src="js/jquery.ui.map.services.js"></script>
     <script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script>



 $( document ).on( "pageshow", "#nearestHotels", function() {

    checkLocation("nearestHotelsList","showInfoPage",['lodging']);                                      
 }
);

<script type="text/javascript">

var map;
var infowindow;
var lat;
var lng;
var lng;
var service;
var reference;
var initialLocation;


var nearestInfoArr = [];
var ulId = null;
var pgId = null;
function checkLocation(listViewId,pageId,typeToSearch) {

    if (navigator.geolocation) {
        ulId = '#'+listViewId;
        pgId = '#'+pageId;
        navigator.geolocation.getCurrentPosition(function(position) {

            initialLocation = new google.maps.LatLng(position.coords.latitude,
                    position.coords.longitude);
            lat = position.coords.latitude;
            lng = position.coords.longitude;

            callPlaceService(lat, lng,typeToSearch);
        }, gpsFail, {
            enableHighAccuracy : true,
            maximumAge : 300000
        });
    }
}

function callPlaceService(lat, lng,typeToSearch) {
      $.mobile.showPageLoadingMsg();  
    var pyrmont = new google.maps.LatLng(lat, lng);

    var myOptions = {
        zoom : 15,
        center : pyrmont,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var request = {
        location : pyrmont,
        radius : 5000,
        types: typeToSearch
        //keyword : 'Bank'
    };

    service = new google.maps.places.PlacesService(map);   


    service.search(request, callback);
}


function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {

        for ( var i = 0; i < results.length; i++) {

            var requestDetails = {reference : results[i].reference};

            service.getDetails(requestDetails, checkDetailedStatus);
        }
    }

    $.mobile.hidePageLoadingMsg();
}

function checkDetailedStatus(details, detailStatus) {
    if (detailStatus == google.maps.places.PlacesServiceStatus.OK) {


        $(ulId).append('<li><a href="'+pgId+'?id='+details.name+'&searchTerm='+details.name+","+details.formatted_address+'&address='+details.formatted_address+'&tele='+details.formatted_phone_number+'">'+details.name+'</a></li>');

        $(ulId).listview("refresh");
        $(ulId).trigger( "updatelayout");       
    }
}

function gpsFail() {
    alert('Failed to retireve location');
}

Answer 1

我建议您移动代码，将Google Maps API脚本加载到您为该特定页面调用的函数中。

所以不要这样：

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

有这样的事情：

$.getScript("https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE");

有关其他选项，请查看以下内容：

如何在jQuery Mobile中动态加载脚本

1 个答案: