如何通过javascript代码显示谷歌地图并获取设备上的坐标?

时间:2012-07-06 14:21:57

标签: javascript google-maps cordova coordinates

我在android中做到了但现在我需要通过手机间隙构建应用程序,我需要在设备上加载地图并获取设备的当前位置坐标(经度和纬度)。

所以我现在需要有javascript代码,坦白说我现在对java脚本不是很熟悉......任何代码/帮助。

这是我通过其显示地图的代码

由于

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

在“*”的位置我正在使用谷歌API密钥..

现在我需要得到坐标......

修改并且当前使用此代码来自链接http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html,但即使这样我也收到此错误“KCLErrorDomain Error 0”

<!DOCTYPE html>
<html>
<head>
    <title>Device Properties Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

        document.addEventListener("deviceready", onDeviceReady, false);

        var watchID = null;


        function onDeviceReady() {

            var options = { frequency: 5000 };
            watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
        }


        function onSuccess(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
            'Longitude: ' + position.coords.longitude     + '<br />' +
            '<hr />'      + element.innerHTML;
        }


        function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        }

        </script>
</head>
<body>
    <p id="geolocation">locating coordinates...</p>
</body>
</html>

我没有得到如何解决这个错误...使用xcode 4.0.1进行phonegap应用程序开发并尝试在4.3模拟器上运行..

1 个答案:

答案 0 :(得分:1)

这里引用了Geolocation上的PhoneGap文档(http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html):

  

地理位置提供设备的位置信息,例如纬度和经度。常见的位置信息源包括全球定位系统(GPS)和从诸如IP地址,RFID,WiFi和蓝牙MAC地址以及GSM / CDMA小区ID之类的网络信号推断的位置。不保证API返回设备的实际位置。

     

此API基于W3C Geo位置API规范。某些设备已经提供了此规范的实现。对于这些设备,使用内置支持而不是用PhoneGap的实现替换它。对于没有地理定位支持的设备,PhoneGap的实现应该与W3C规范兼容。

基本上,您可以使用HTML5 Geolocation API,而无需担心PhoneGap的任何差异。如果您想获得用户的位置一次,请使用navigator.geolocation.getCurrentPosition(),如果您想定期发送用户的位置,请使用navigator.geolocation.watchPosition()

navigator.geolocation.watchPosition(locationSuccess, locationError, {timeout: 30000});

function locationSuccess(position)
{
    // this is your position as a LatLng object. use it however you need
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
}

function locationError(err)
{
    if (err.code == 1)
        alert("You must allow this website to use the Geolocation API to access your position.");
    else if (err.code == 3)
        alert("Unfortunately, your position request timed out.");
    else
        alert("Unfortunately, your position could not be determined.");
}