百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5通过获取地理位置经纬度,判断城市
分享文章到:

HTML5通过获取地理位置经纬度,判断城市

发布时间:01/15 来源: 浏览: 关键词:
经纬度在以前我们肯定是通过百度地图或google地图来获得用户的经纬度然后判断所在城市了,现在我们可以直接使用html5来进行定位了,下面一起来看一个利用 HTML5通过获取地理位置经纬度,判断城市的例子。


html5提供了获取地理位置的api,很方便确定客户的经纬度,我们获取到经纬度以后,可以通过百度地图提供的api确定用户的所在位置。


<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>基于浏览器的HTML5查找地理位置</title>
    <!-- 百度API -->
 <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
  <script>

           function getLocation(){
               var options={
                   enableHighAccuracy:true,
                   maximumAge:1000
               }
               if(navigator.geolocation){
                   //浏览器支持geolocation
                   navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
               }else{
                   //浏览器不支持geolocation
                   alert('您的浏览器不支持地理位置定位');
               }
           }

           //成功时
           function onSuccess(position){
               //返回用户位置
               //经度
               var longitude =position.coords.longitude;
               //纬度
               var latitude = position.coords.latitude;

    alert('经度'+longitude+',纬度'+latitude);
              
               //根据经纬度获取地理位置,不太准确,获取城市区域还是可以的
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(longitude,latitude);
    var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs){
       var addComp = rs.addressComponents;
       alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });

           }

           //失败时
           function onError(error){
               switch(error.code){
                   case 1:
                   alert("位置服务被拒绝");
                   break;

                   case 2:
                   alert("暂时获取不到位置信息");
                   break;

                   case 3:
                   alert("获取信息超时");
                   break;

                   case 4:
                    alert("未知错误");
                   break;
               }

           }

           window.onload=getLocation;
        
   </script>
</head>
<body>
</body>
</html>

目前在电脑上有时不能获取,手机端还是很好的,另外,获取的定位不是十分准确,但是用来获取城市区域还是可以的。

其实这个就是调用了百度地图+html5来实现了,非常的不错。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有13人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板