H5定位

Question

H5定位

Wscats opened this issue 8 years ago · 0 comments

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title></title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jKaZX2RsTYAxYuq5wf2lCv6GaQfzYyin"></script>
    </head>
    <style>
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <body>
        <div id="allmap"></div>
    </body>
    <script>
        //h5 谷歌的方案
        function GetLocation() {
            //判断浏览器是否含有navigator对象geolocation属性
            if(navigator.geolocation) {
                //如果浏览器支持geolocation的话我们调用getCurrentPosition一个方法
                navigator.geolocation.getCurrentPosition(
                    //如果我们能从googleApi里面拿到定位信息我们就可以得到定位信息
                    function(position) {
                        //经纬度
                        console.log(position.coords.longitude);
                        console.log(position.coords.latitude);
                    },
                    //如果我们拿不到就返回错误信息
                    function(error) {
                        //百度方案
                        console.log(error);
                        //创建一个地图对象，并把地图渲染到id为allmap的标签元素上
                        var map = new BMap.Map("allmap");
                        //var point = new BMap.Point(116.331398, 39.897445);
                        //map.centerAndZoom(point, 12);
                        var geolocation = new BMap.Geolocation();
                        geolocation.getCurrentPosition(
                            //百度地图调用成功的回调
                            function(r) {
                                console.log(this);//输出geolocation对象
                                console.log(this.getStatus()); //输出现在的状态码
                                //关于状态码
                                //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
                                //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
                                //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
                                //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
                                //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
                                //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
                                //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
                                //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
                                //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)
                                if(this.getStatus() == BMAP_STATUS_SUCCESS) {
                                    var mark = new BMap.Marker(r.point); //打一个红点
                                    map.addOverlay(mark); //加标记到地图中
                                    map.panTo(r.point); //把标记移到对应的坐标
                                    //r.point 包含lat和long的坐标点
                                } else {
                                    alert("状态值出错");
                                }
                            },
                            //失败的回调
                            function(error) {

                            }
                        )
                    });
            }
        }
        GetLocation();
    </script>

</html>