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

时间：2017-10-17 13:30:12 阅读：274 评论：0 收藏：0 [点我收藏+]

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 {

width: 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>

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

原文：http://www.cnblogs.com/xzzzys/p/7680598.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)