首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

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

使用 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/

热点排行