<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的位置:</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError,
{
enableHighAcuracy:true,
timeout:5000,
maximumAge:3000
}
);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>
参考:http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_map_script
http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html
分享到:
相关推荐
全球定位系统HTML 5 GPS
HTML开发教程之使用H5 GPS定位API.zip
gps 这5个文件的出处: http://www.pudn.com/downloads209/doc/detail985779.html http://www.pudn.com/downloads351/sourcecode/others/detail1528997.html ...
WindowsMobile5下的GPS跟踪定位(及短信发送)源代码
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
vs2010 gps web定位HTML5 测试 精度30米
使用方法: 1、把gm.html内置到系统资源里; 2、使用如下代码,即可在webbrowser激活地图; webBrowser1.Navigate("about:blank"); webBrowser1.Document.Write...5、gps坐标组以“,”分隔;坐标结构为lng lat;
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
这是一个基于html5的网页,可以作为一般的作业,用到了web worker、web存储、gps、视频音频等等
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
用于HTML5客户端的GPS文件的工具! 如描述所示,GPSTools可用于处理GPS文件。 您可以直接访问它,而无需阅读本自述文件的其余部分,只需访问此存储库的GitHub页面(位于 进口 GPSTools可以加载多种格式的GPS文件,...
上上签-基于html5的签到系统 为参加齐鲁大学生软件设计大赛中的html5创意应用命题 本签到系统采用GPS定位签到+人脸认证,保证了人与手机在一起,手机在指定位置范围内,进行有效签到。 人脸识别系统+ GPS定位距离...