使用 phonegap eclipse 的 Android 的 HTML5 地理定位应用程序答案

【问题标题】：HTML5 geolocation app for Android using phonegap eclipse使用 phonegap eclipse 的 Android 的 HTML5 地理定位应用程序
【发布时间】：2013-06-26 17:02:26
【问题描述】：

我无法运行这个适用于 Android 的 HTML5 地理定位应用程序。该应用程序在我的桌面上的 Firefox 浏览器中运行良好，但是一旦我使用 Eclipse - PhoneGap 编译它，地理定位按钮不会执行命令 document.write，我尝试使用 alert() 以及 console.log()，但没有阳性结果。

代码如下，如果我错过了设置任何用于地理定位的电话传感器，请指点我吗？

Below is the code:

<html>
<head>
<meta charset="UTF-8">

<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>  // Begginning  of Google Maps script

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h@219000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();

</script> / End of Google Maps script

<script> // Script that runs the app    

$(document).ready(function() {
    $('#startGeo').click(checkLocation);

    function checkLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, locationFail);


        }
        else {
        document.write('You dont have geolocation');
        }
    } // ends checkLocation()

    function getLocation(position) {

        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.timestamp;

        document.write(' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);



    }
    function locationFail()  {
    document.write('We did not get your location. You are safe from big broda');
    }    

});


</script>

</headd>

<body>
<button id="startGeo"> Click here for geolocation  </button>
</body>
</html>

【问题讨论】：

标签： android html google-maps geolocation cordova

【解决方案1】：

document.write 似乎是您的问题的原因，而不是地理定位失败，当然假设您在 AndroidManifest.xml 中有足够的权限：

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

试试这个：

<html>
<head>
<meta charset="UTF-8">

<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>  // Begginning  of Google Maps script

window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h@219000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();

</script> / End of Google Maps script

<script> // Script that runs the app    

$(document).ready(function() {
    $('#startGeo').click(checkLocation);

    function checkLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, locationFail);
        }
        else {
        $('#result').append('You dont have geolocation');
        }
    } // ends checkLocation()

    function getLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.timestamp;

        $('#result').append("location: "+' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);


    }
    function locationFail()  {
    $('#result').append('We did not get your location. You are safe from big broda');
    }    

});


</script>

</head>

<body>
<button id="startGeo"> Click here for geolocation  </button>
<div id="result"></div>
</body>

顺便说一句，您的源代码中有一个错字</headd> 应该是</head>。

您还应该真正使用$(document).on("deviceready") 而不是$(document).ready() 和Phonegap，因为'ready' 事件仅表示DOM 已准备好，而'deviceready' 表示Phonegap 已完全加载。

【讨论】：

非常感谢，现在可以使用了！至于你关于使用 $(document).on("deviceready") 而不是 $(document).ready() 的建议，调用的第一行应该是这样的吗？当我将其更改为 $(document).on("deviceready", function () 按钮不再起作用...
很高兴我能提供帮助 :-) 请接受我的回答，以便其他人知道它已得到回答。对于 deviceready 事件，您的语法看起来是正确的，所以我不确定为什么它不起作用 - 也许尝试使用 bind：$(document).bind("deviceready",function(){...}); deviceready 事件的Phonegap 文档是here，如果它有帮助...