开发者社区> 问答> 正文

HTML中的地理定位功能的实现例子有什么?

HTML中的地理定位功能的实现例子有什么?

展开
收起
游客3gzok77e677xw 2022-03-28 17:20:02 390 0
1 条回答
写回答
取消 提交回答
  • 例子: 参考百度地图开放平台:http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <!--下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>JS获取当前地理位置的方法</title>
    </head>
     
    <body>
    <!--可以自己定义body体内容-->
    </body>
     
    <!--引用百度地图API文件, 您的秘钥的获取方式是注册为百度地图的开发者,创建应用-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
        //v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script type="text/javascript">
     
        // 创建一个函数,主要功能是在调用html5的geolocation()前,先判断当前浏览器是否支持html5,(PC绝大部分浏览器不支持或者拒绝html5定位)
        function getLocation() {
            var options = {
                enableHighAccuracy: true,
                maximumAge: 1000
            };
            alert('获取位置信息开始--------->');
            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);
            });
            // 这里后面可以写你的后续操作了
            handleData(longitude, latitude);
        }
     
        // 失败时的回调函数
        // 这里是错误提示信息
        function onError(error) {
            switch (error.code) {
                case 1:
                    alert("位置服务被拒绝!");
                    break;
                case 2:
                    alert("暂时获取不到位置信息!");
                    break;
                case 3:
                    alert("获取信息超时!");
                    break;
                case 4:
                    alert("未知错误!");
                    break;
            }
            // 这里后面可以写你的后续操作了,下面的经纬度是天安门的具体位置
            // 经度
            var longitude = 39.9151;
            // 纬度
            var latitude = 116.4041;
            handleData(longitude, latitude);
        }
     
        // 页面载入时请求获取当前地理位置
        window.onload = function () {
            // html5获取地理位置
            getLocation();
        };
    </script>
    </html>
    
    2022-03-28 17:47:31
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载