HTML5 Geolocation定位来得如此简单

最新推荐文章于 2025-08-10 06:12:57 发布

转载最新推荐文章于 2025-08-10 06:12:57 发布 · 776 阅读

文章标签：

#html5 #function #html #string #浏览器 #google

HTML5 专栏收录该内容

52 篇文章

订阅专栏

本文提供两个HTML5地理定位功能示例，一是获取并显示访问者的经纬度坐标，二是结合Google Maps API显示用户当前位置的地图标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例一取访问者的经纬度：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5 Geolocation</title>  
<style>  
body {background-color:#fff;}  
</style>  
</head>  
<body>  

<p id="geo_loc"><p>

<script>    
  function getElem(id) {  
       return typeof id === 'string' ? document.getElementById(id) : id;  
   }  
       
    function show_it(lat, lon) {  
        var str = '您当前的位置，纬度：' + lat + '，经度：' + lon;  
       getElem('geo_loc').innerHTML = str;  
    }  
      
   if (navigator.geolocation) {  
       navigator.geolocation.getCurrentPosition(function(position) {    
           show_it(position.coords.latitude, position.coords.longitude);    
       }, function(err) {  
           getElem('geo_loc').innerHTML = err.code + "\n" + err.message;  
       });  
   } else {  
       getElem('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";  
   }  
</script>   
</body>  
</html>

示例二与google map 结合怎么样？

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5 Geolocation</title>  
<style>  
body {background-color:#fff;}  
</style>  
</head>  
<body>  

<p id="map_canvas"><p>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script>  
function getElem(id) {  
    return typeof id === 'string' ? document.getElementById(id) : id;  
}  
  
function success(position) {  
    var mapcanvas = document.createElement('div');  
    mapcanvas.id = 'mapcanvas';  
    mapcanvas.style.height = '400px';  
    mapcanvas.style.width = '560px';  
  
    getElem("map_canvas").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:"你在这里！"  
    });  
}  
   
if (navigator.geolocation) {  
   navigator.geolocation.getCurrentPosition(success);   
} else {  
  alert("您当前使用的浏览器不支持geolocation服务");  
}    
</script>  
  
</body>  
</html>