javascript - 使用 jQuery Mobile 捕获 'pageshow' 上的经纬度坐标

Question

我正在编写一个 iOS 应用程序，该应用程序必须在每次加载页面时确定当前的经纬度。我需要从事件处理程序访问经度和纬度，并将最新坐标传递给第三方服务器。

我已经能够使用 Cordova 的 navigator.geolocation.getCurrentPosition 检索坐标，但需要帮助:

1. 每次加载页面时捕获坐标
2. 将坐标值附加到外部 URL 上的 GET 请求。

所以问题很简单，有人可以告诉我正确的语法，以便能够捕获在下面的 getlocation 脚本中生成的值，这样我就可以将坐标附加到 url，因此坐标 = 生成的长/纬度值

这是我的 pageshow 事件处理程序代码:

$("#HomePage").live("pageshow",

                    function() {
                    $.mobile.showPageLoadingMsg();
                    $.get("http://[externalurl]/process.cfc?method=HomePage&CORDS=[LATEST COORDS VALUE]]&returnformat=json", {}, function(res) {
                          $.mobile.hidePageLoadingMsg();
                          var s = "";
                          for(var i=0; i<res.length; i++) {
                          s+= "<li><a href='employeedetails.html?Id=" +  res[i].Id + "'>Employee Details</a></li>";
                          s+= "<li><a href='OrgDetails.html?OrgId=" +  res[i].OrgId + "'>OrgDetails</a></li>";
                         }
                          $("#HomePageContent").html(s);
                          $("#HomePageContent").listview("refresh");
                          },"json");
                    });

下面是我用来检索用户当前坐标的代码。我只需要弄清楚如何将值放入上面的 jQuery 函数中，以便将它们附加到 GET 请求。

var x = document.getElementById("演示");

              function getLocation() {
              if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition);
              } else {
              x.innerHTML = "Geolocation is not supported by this browser.";
              }
              }

              function showPosition(position) {
              x.innerHTML = + position.coords.latitude +
              "," + position.coords.longitude;
              }

Answer 1

有几个问题需要纠正:

首先，$.live() 方法很久以前就被弃用了，并在 1.9 版 (http://api.jquery.com/live/) 中从 jQuery 中完全删除。

其次，jQuery Mobile pageshow 事件也已弃用，并将随着 jQuery Mobile 1.6 版 (https://api.jquerymobile.com/pageshow/) 的发布而被删除。

显示页面时捕获的事件处理程序应如下所示:

$(document).on("pagecontainershow", function( event, ui ) {
   var elmtId = $('body').pagecontainer('getActivePage').prop('id'); 

    if (elmtId == "HomePage") {
       // YOUR CODE HERE
    }
});

没有什么可以阻止您直接从上面的 pagecontainershow 事件处理程序中执行 getCurrentPosition 方法。

可以这么简单:

$(document).on("pagecontainershow", function( event, ui ) {
   var elmtId = $('body').pagecontainer('getActivePage').prop('id'); 

    if (elmtId == "HomePage") {
        navigator.geolocation.getCurrentPosition(function(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = position.coords.latitude 
                             + ',' 
                             +  position.coords.longitude;
        }, function(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        });
    }

});

您需要确保 #HomePage 确实引用 jQuery Mobile 页面，不是 和页面内的元素。 jQuery Mobile 页面在其最外层元素 (http://demos.jquerymobile.com/1.4.5/pages/) 上具有 data-role="page" 属性。