移动端用户定位与自动填充

1、使用到的技术

HTML+CSS+JS+jJquery+H5地理位置定位

2、遇到的问题

1）使用H5的地理位置定位方法，所获取到的位置会有偏移量
2）经纬度有长度限制，小数点后位数为14位
3）使用百度地图的时候，需要给地图设置宽、高和中心点范围，方可显示地图
填充内容的时候
4）在把定位的内容填充到标签里的时候，对于input标签，$('标签名').val(获取到的地址)
其他标签$('标签名').text(获取到的地址);

3、详细代码

引入外部文件

<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?你的密钥"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  

css部分：

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";background: #f6f6f6;}
pre {
   font-size: 1.4rem;
   margin: 12% 0 12% 8%;
}
input {
   height: 1.4rem;
   border: none;
   border-bottom: 1px solid gray;
   width: 200px;
   background: #f6f6f6;
}
.btn {
   width: 100%;
   height: 34px;
   color: #fff;
   font-size: 1.2rem;
   background: orange;
   border: none;
   position: absolute;
   bottom: 0;
}
#allmap {
   width: 100%;
   height: 180px;
}
table {
   width: 100%;
}

html部分：

<form action="" method="post" >
    <table>
        <tr>
            <td><pre>姓    名：</pre></td>
            <td><input class="name" id="names" type="text" placeholder="请输入姓名" /></td>
        </tr>
        <tr>
            <td><pre>联系电话：</pre></td>
            <td><input class="phone" id="phones" maxlength="11" type="text" placeholder="请输联系11位的手机号码" /></td>
        </tr>
        <tr>
            <td><pre>当前地址：</pre></td>
            <td><input id="address" type="text" val=""/></td>
        </tr>
        <tr>
            <td colspan="2"><div id="allmap"></div></td>
        </tr>
    </table>
</form>
<button class="btn" type="button" onclick = "login_check()">确认</button>

js部分：

function getLocation(){
        var options={
            enableHighAccuracy:true,
            maximumAge:1000
        }
        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 gpsPoint = new BMap.Point(longitude,latitude);
        BMap.Convertor.translate(gpsPoint, 0, function (point) {  //处理H5偏移量
            map.centerAndZoom(point,14);  
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画          
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                var addr = addComp.province + addComp.city  + addComp.district + addComp.street ;
                $('#address').val(addr);   //获取input标签的值，将位置填充到input标签
            });
        });
    }
    function onError(error){
        switch(error.code){
            case 1:
                alert("位置服务被拒绝");
                break;
            case 2:
                alert("暂时获取不到位置信息");
                break;
            case 3:
                alert("获取信息超时");
                break;
            case 4:
                alert("未知错误");
                break;
        }
    }
window.onload=getLocation;

效果图：