手机端GPS定位结合百度地图实现定位

手机端GPS定位结合百度地图实现定位

html页面：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html, #allmap {

             100%;

            height: 100%;

            overflow: hidden;

            margin: 0;

            font-family: "微软雅黑";

        }

    </style>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

    <title></title>

</head>

<body>

    <p id="allmap"></p>

</body>

</html>

JS部分：

<script type="text/javascript">

    var x = "";

    var y = "";

    var dizhi = "";

    function getLocation(){

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(showPosition,showError);

        }else{

            alert("浏览器不支持地理定位。");

        }

    }

    function showPosition(position){



        y = position.coords.latitude;//纬度

        x = position.coords.longitude;//经度



        // 百度地图API功能

        //GPS坐标

        var x = 116.32715863448607;

        var y = 39.990912172420714;

        var ggPoint = new BMap.Point(x, y);



        //地图初始化

        var bm = new BMap.Map("allmap");

        bm.centerAndZoom(ggPoint, 15);

        bm.addControl(new BMap.NavigationControl());

        bm.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

        bm.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

        bm.addEventListener("tilesloaded", function () { });//地图加载完成

        var gc = new BMap.Geocoder();

        bm.addEventListener("click", function (e) {



            ggPoint = new BMap.Point(e.point.lng, e.point.lat);

            gc.getLocation(ggPoint, function (rs) {



                var addComp = rs.addressComponents;

                var mapAddress = addComp.province + addComp.city + addComp.district

                + addComp.street + addComp.streetNumber;

                dizhi = mapAddress;

                if (confirm(dizhi)) {

                    window.location.href = "succes.html"

                }

                var marker = new BMap.Marker(ggPoint); // 创建点

                bm.addOverlay(marker);

                var label = new BMap.Label("您选择的位置为"+dizhi, { offset: new BMap.Size(20, -10) });

                marker.setLabel(label); //添加百度label

                bm.setCenter(ggPoint);

            });

        });







        bm.addControl(new BMap.NavigationControl());

        //坐标转换完之后的回调函数

        translateCallback = function (data) {

            if (data.status === 0) {

                var marker = new BMap.Marker(data.points[0]);

                bm.addOverlay(marker);

                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                //marker.enableDragging();//可拖拽

                //var label = new BMap.Label("您所在的位置", { offset: new BMap.Size(20, -10) });

                //marker.setLabel(label); //添加百度label

                //bm.setCenter(data.points[0]);



                //var a=BMap.Convertor(ggPoint, 0);

                gc.getLocation(data.points[0], function (rs) {

                    //alert(rs.sematic_description);

                    var addComp = rs.addressComponents;

                    var mapAddress = addComp.province + addComp.city + addComp.district

                    + addComp.street + addComp.streetNumber;

                    dizhi = mapAddress;

                    confirm(dizhi);

                    if (confirm(dizhi)) {

                        window.location.href = "succes.html"

                    }

                    var label = new BMap.Label("定位您所在的位置为"+dizhi, { offset: new BMap.Size(20, -10) });

                    marker.setLabel(label); //添加百度label

                    bm.setCenter(data.points[0]);

                });



            }

        }

        setTimeout(function () {

            var convertor = new BMap.Convertor();

            var pointArr = []

            pointArr.push(ggPoint);

            convertor.translate(pointArr, 1, 5, translateCallback)

        }, 1000);

    }

    function showError(error){

        switch(error.code) {

            case error.PERMISSION_DENIED:

                alert("定位失败,用户拒绝请求地理定位");

                break;

            case error.POSITION_UNAVAILABLE:

                alert("定位失败,位置信息是不可用");

                break;

            case error.TIMEOUT:

                alert("定位失败,请求获取用户位置超时");

                break;

            case error.UNKNOWN_ERROR:

                alert("定位失败,定位系统失效");

                break;

        }

    }

    getLocation();

</script>
相关阅读:
python基础学习文件内容的操作
 python基础学习字符串操作
 python基础学习运算符
 python基础学习列表
 centos一键安装nginx
centos6添加整段多IP脚本
 Ubuntu 添加整段多IP脚本
 安装python2.7
两位float型的小数相加，不会变成两位小时的处理方法
 mysql 5.7 执行group by 语句报错
原文地址：https://www.cnblogs.com/xzzzys/p/7680598.html