APP地图定位

下面代码中获取到了当前用户手机的经纬度，然后将经纬度转化成了省市县，
<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
    *{ 
        height: 80%; //设置地图高度，APP一般不用设置高度显示地图
    } 
</style>
<!--存储获取的经纬度-->
<input type="hidden" id="latvalue" value=""/ >
<input type="hidden" id="lonvalue" value=""/ >
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<!--秘钥需要在百度API申请-->
<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> 
<script> 
    $(function(){ 
        navigator.geolocation.getCurrentPosition(translatePoint); //定位 
    }); 
    function translatePoint(position){ 
        var currentLat = position.coords.latitude;  //获取当前位置的经度
        var currentLon = position.coords.longitude;   //获取当前位置的纬度
        var gpsPoint = new BMap.Point(currentLon, currentLat); 
        BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标 
        $("#latvalue").val(currentLat);
        $("#lonvalue").val(currentLon);
    }
    function initMap(point){ 
        //初始化地图 
        map = new BMap.Map("map"); 
        map.addControl(new BMap.NavigationControl()); 
        map.addControl(new BMap.ScaleControl()); 
        map.addControl(new BMap.OverviewMapControl()); 
        map.centerAndZoom(point, 15); 
        map.addOverlay(new BMap.Marker(point)) 
    }
    
    //以上方法可以获取到当前位置经纬度，可以先获取到经纬度，
    //然后将经纬度在隐藏input框中存储起来，再触发一个getAddress点击事件，将经纬度转化成省市县
    
    //将经纬度转成省市县
    function getAddress(){
        var latitude = $("#latvalue").val();  //获取存储的经纬度
        var longitude = $("#lonvalue").val();
        var address;
        //通过baiduMap API获取街道名称
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude,latitude);
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function(rs){
               var addComp = rs.addressComponents;
            address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            alert(address);
        });
        return address;
    }
</script> 
</head> 
<body> 
<div id="map"></div>
<button style="width: 50%; height: 40px; background-color: pink;" onclick="getAddress()">确定</button>
</body> 
</html>
posted @ 2018-01-18 15:24 党欣彤阅读(288) 评论(0) 收藏举报
党欣彤

APP地图定位

公告
