使用 HTML 5 创建移动 Web 应用程序，第 1 部分: 联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序...

最新推荐文章于 2020-09-03 02:50:46 发布

hulefei29

最新推荐文章于 2020-09-03 02:50:46 发布

阅读量155

点赞数

分类专栏： Web前端文章标签： HTML Web Google HTML5 JavaScript ViewUI

本文链接：https://blog.csdn.net/hulefei29/article/details/83642231

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html5获取js获取坐标的方法

navigator.geolocation.getCurrentPosition(successCallback, 
errorCallback, options);

成功函数将通过一个单独的 Position 类型的参数传递。这个对象有两个属性：一个时间戳的属性和称为坐标的 Coordinates 类型的属性。一个 Coordinates 对象有几个属性：

latitude
longitude
altitude
accuracy
altitudeAccuracy
heading
speed

这些参数不是在所有设备上都可用，除了 latitude、longitude 和 accuracy。如果支持地理定位 API，并且设备可以解析位置，就可以获取 latitude、longitude 和 accuracy。

失败 callback 函数将传递一个 PositionError 类型参数。PositionError 实例有两个参数：code 和 message。message 是设备特定的，可用于调试。code 有以下三个取值：

PERMISSION_DENIED (1)
POSITION_UNAVAILABLE (2)
TIMEOUT (3)

更高级的内容：追踪

id= navigator.geolocation.watchPosition(function(pos){});

latitude
longitude
altitude
accuracy
altitudeAccuracy
heading
speed

创建地图并放置标记后，开始追踪用户。捕获从 watchPosition 中返回的 ID。无论何时接收到新的位置，都将地图在新位置重新居中，并将标记移到新位置

结合google map示意代码

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>I'm tracking you!</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
     sensor=true"></script> 
<script type="text/javascript">
    var trackerId = 0;
    var geocoder;
    var theUser = {};
    var map = {};
    function initialize() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation){
            var gps = navigator.geolocation;
            gps.getCurrentPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.
latitude,pos.coords.longitude);
                var opts = {zoom:12, center:latLng, mapTypeId: 
google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map($("map_canvas"), opts);
                theUser = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: "You!"
                });
                showLocation(pos);
            });
            trackerId = gps.watchPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.latitude,pos.
coords.longitude);
                map.setCenter(latLng);
                theUser.setPosition(latLng);
                showLocation(pos);
            });
        }
  }
</script> 
</head> 
<body style="margin:0px; padding:0px;" οnlοad="initialize()"> 
    <div id="superbar">      
        <span class="msg">Current location: 
              <span id="location"></span>
          </span>
          <input type="button" value="Stop tracking me!" 
οnclick="stopTracking()"/>
      </div>
  <div id="map_canvas" style="width:100%; height:90%; float:left; 
border: 1px solid black;">
  </div> 
</body> 
</html>

详细请见：

http://www.ibm.com/developerworks/cn/xml/x-html5mobile1/