利用html5 共享地理位置

时间：2015-12-20 19:10:28 阅读：241 评论：0 收藏：0 [点我收藏+]

标签：

该例子是演示利用HTML5实现地理定位。也就是获得本机IP地址，然后判断出所在位置，并且显示在Google地图上。。

实例效果图

技术分享

该实例预览地址：http://html5demos.com/geo

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: geolocation</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
section, header, footer {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
header, article > *, footer > * {
margin: 20px;
}
footer > * {
margin: 20px;
color: #999;
}
#status {
padding: 5px;
color: #fff;
background: #ccc;
}
#status.fail {
background: #c00;
}
#status.success {
background: #0c0;
}
</style>
<script src="h5utils.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<section id="wrapper">
<header>
<h1>Geolocation</h1>
</header>
<article>
<p>Finding your location: <span id="status">checking…</span></p>
</article>
<footer><a href=http://www.houoop.com/%3Cspan class="str">"/">HTML5 demo</a></footer>
</section>
<script>
function success(position) {
var s = document.querySelector(‘#status‘);
if (s.className == ‘success‘) {
// not sure why we‘re hitting this twice in FF, I think it‘s to do with a cached result coming back
return; }
s.innerHTML = "found you!";
s.className = ‘success‘;
var mapcanvas = document.createElement(‘div‘);
mapcanvas.id = ‘mapcanvas‘;
mapcanvas.style.height = ‘400px‘;
mapcanvas.style.width = ‘100%‘;
document.querySelector(‘article‘).appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15, center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here!" });
}
function error(msg) {
var s = document.querySelector(‘#status‘);
s.innerHTML = typeof msg == ‘string‘ ? msg : "failed";
s.className = ‘fail‘;
// console.log(arguments);
} if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error(‘not supported‘);
}
</script>
</body>
</html>

技术分享

利用html5 共享地理位置

标签：

原文地址：http://www.cnblogs.com/jiaze/p/5061536.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行