手机端，h5，获取位置，经度纬度

最新推荐文章于 2023-06-30 16:54:05 发布

guoruijun_2012_4

最新推荐文章于 2023-06-30 16:54:05 发布

阅读量1k

点赞数

分类专栏： GIS

原文链接：www.baidu.com

版权

GIS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

以下代码保存为html格式，在手机端浏览器打开，浏览器开放读取位置权限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
</head>
<body>
您目前在<p></p>
</body>
<script>
    //定义一个空的位置构造函数
    function Location(){};
    //定义一个可以获得经纬度的方法
    Location.prototype.getLocation = function(callback){
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        this.callback = Object.prototype.toString.call(callback) =="[object Function]" ?
                callback :
                function(address){
                    alert(address.province + address.city);
                    console.log("getocation(callbackFunction) 可获得定位信息对象");
                };
        var self = this;
        if (navigator.geolocation) {
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(function(position){
                //经度
                var longitude = position.coords.longitude;
                //纬度
                var latitude = position.coords.latitude;
                alert(longitude +"|"+ latitude);
                self.loadMapApi(longitude,latitude);
            }, self.onError, options);
        } else {
            //浏览器不支持geolocation
        }
    };
    //定义一个可以解析经纬度的方法，调用百度的api
    Location.prototype.loadMapApi = function(longitude, latitude){
        var self = this;
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript= document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=FG7wxr1VUj0k2NwoO3yXzymd&amp;services=&amp;t=20140930184510";
        oHead.appendChild(oScript);
        oScript.onload = function(date){
            var point = new BMap.Point(longitude, latitude);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                self.callback(addComp);
            });
        }
    };
   //定义出现查询位置出现意外的方法
    Location.prototype.onError = function(error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝");
                break;
            case 2:
                alert("暂时获取不到位置信息");
                break;
            case 3:
                alert("获取信息超时");
                break;
            case 4:
                alert("未知错误");
                break;
        }
    };
    //调用
    var local = new Location();
    local.getLocation(function(res){
        var str=""
        for(i in res ){
            str=res[i]+str
        }
        document.querySelector("p").innerHTML=str;
    })
</script>
</html>

guoruijun_2012_4

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手机端，h5，获取位置，经度纬度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Title</title></head&gt
复制链接

扫一扫