使用 HTML 5 创建移动 Web 应用程序,第 1 部分: 联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序
?
html5获取js获取坐标的方法
?
<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;" onload="initialize()"> <div id="superbar"> <span value="Stop tracking me!" onclick="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/