• HTML5根据浏览器获取经度和纬度(百度API)


    网页获取用户位置信息的办法
    1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息
    优点是比较准确,缺点是需要用户自己选择位置
    2 通过H5 geolocation属性获取经度和纬度,优点是用户只需要点击允许获取即可,缺点是浏览器获取的经度相对不是很准确而且仍旧需要用户确认。
    3 通过用户IP来分析用户位置(待后续研究)

    下面是第二种方法的代码实现
    <!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>
    请把你的疑问评论在下方。
  • 相关阅读:
    ES6(四)字符串的扩展
    ES6(三)数组的扩展
    ES6(二) Destructuring-变量的解构赋值
    ES6(一) let and const
    canvas(七) 文字编写
    canvas(五)createPattern
    canvas(四) Gradient- demo
    canvas(三) star- demo
    jQuery之简单动画效果
    web开发小白之路
  • 原文地址:https://www.cnblogs.com/zzcit/p/5707391.html
Copyright © 2020-2023  润新知