0

我正在使用运行在 PhoneGap 之上的 jQuery mobile 开发一个移动应用程序。面临我使用 Google 放置 API+jquery UI 地图的问题。问题是我只需要在加载特定页面时加载谷歌地图 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');
}
4

1 回答 1

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");

查看以下内容以获取其他选项：

于 2013-07-07T03:18:27.577 回答