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

how to show google map and get coordinates on device through javascript code?

本文关键字：获取 坐标 JavaScript 何通过 代码 显示 谷歌地图      更新时间：2023-09-26

我在 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 错误 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模拟器上运行。

这里引用

了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 地理位置 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.");
}
相关文章：