This code is also very simple, the core is the HTML5 geolocation API, the function prototype is defined as follows:
void GetCurrentPosition (in Positioncallback successcallback, in optional Positionerrorcallback errorcallback, In optional positionoptions options);
Tags:JQuery Mobile Code Snippet (3) [Full screen view all code]1. Code [JavaScript] Code?
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
<!DOCTYPE html>
<meta charset=
"utf-8" />
<meta name=
"viewport" content=
"width = device-width; initial-scale=1"
>
<title>GeoLocation API演示程序</title>
<link rel=
"stylesheet" href=
"jquery.mobile.css" />
<script src=
"jquery.min.js"
></script>
<script src=
"jquery.mobile.min.js"
></script>
<script type=
"text/javascript"
>
function startgps()
{
var gps = navigator.geolocation;
if (gps)
{
gps.getCurrentPosition(showgps,
function
(error)
{
alert(
"Got an error, code: " + error.code +
" message: "
+ error.message);
},
{maximumAge: 10000});
// 这里设置超时为10000毫秒,即10秒
}
else
{
showgps();
}
}
function showgps(position)
{
if (position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert(
"latitude: " + latitude +
"\r\n longitude: "
+ longitude);
}
else
alert(
"position is null"
);
}
</script>
<body>
<section
class
=
"ui-page ui-body-c ui-page-active" data-url=
"page1" id=
"page1" data-role=
"page"
>
"banner"
class
=
"ui-bar-a ui-header" data-role=
"header"
>
"1" role=
"heading"
tabindex=
"0" class
=
"ui-title"
>GeoLocation API Demo
<div role=
"main" data-role=
"content" class
=
"ui-content"
>
<input type=
"button" value=
"我的位置" onclick=
"startgps()"
/>
</div>
<footer role=
"contentinfo" class
=
"ui-bar-a ui-footer" data-role=
"footer"
>
"1" role=
"heading"
tabindex=
"0" class
=
"ui-title"
>Allan Yan
</footer>
</section>
|
2. [Image] Img_0073.png 3. Picture Img_0074.png Report
JQuery Mobile + HTML5 Get geo-location information