百度地图定位

这里定位使用百度地图api

地图定位主要是网络定位和GPS定位 

网络定位就是根据使用的网络的ip地址来定位,误差比较大

GPS误差比较小

现在网上提供的h5定位方式大概是有GPS根据GPS,没有就根据网络

百度地图提供网络定位代码:

<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="../js/common.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hGzGgrbYoSHskeCyN0eNNEjI"></script>
    <title>浏览器定位</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="output">
Geolocation可获取设备位置信息,包括经度、纬度、高度等信息。
        </div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    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){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            alert('您的位置:'+r.point.lng+','+r.point.lat);
             var point = new BMap.Point(r.point.lng,r.point.lat );
             map.centerAndZoom(point,15);
             var navigationControl = new BMap.NavigationControl();
  map.addControl(navigationControl);
             var mk = new BMap.Marker(r.point);
             map.addOverlay(mk);
             
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    //关于状态码
    //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 新增)
</script>

 

这里的代码可以在各种浏览器中运行

 

这里使用的是HBuilder内核提供的对象plus 进行定位,但还是使用百度地图进行展现的

代码:

 <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Hello H5+</title>
        <script type="text/javascript" src="../js/common.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hGzGgrbYoSHskeCyN0eNNEjI"></script>
        <script type="text/javascript">
var watchId;
function geoInf( position ) {
    var str = "";
    str += "地址:"+position.addresses+"\n";//获取地址信息
    var timeflag = position.timestamp;//获取到地理位置信息的时间戳;一个毫秒数;
    str += "时间戳:"+timeflag+"\n";
    var codns = position.coords;//获取地理坐标信息;
    var lat = codns.latitude;//获取到当前位置的纬度;
    str += "纬度:"+lat+"\n";
    var longt = codns.longitude;//获取到当前位置的经度
    str += "经度:"+longt+"\n";
    var alt = codns.altitude;//获取到当前位置的海拔信息;
    str += "海拔:"+alt+"\n";
    var accu = codns.accuracy;//地理坐标信息精确度信息;
    str += "精确度:"+accu+"\n";
    var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度;
    str += "海拔精确度:"+altAcc+"\n";
    var head = codns.heading;//获取设备的移动方向;
    str += "移动方向:"+head+"\n";
    var sped = codns.speed;//获取设备的移动速度;
    str += "移动速度:"+sped;
    console.log(JSON.stringify(position));
    outLine( str );
    //outLine(longt);
    //outLine(lat);
    addPoint(longt,lat);
}
function getPos() {
    outSet( "获取位置信息:" );
    plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
        outSet( "获取位置信息失败:"+e.message );
    } ,{provider:'baidu'});
 
}
function addPoint(lng,lat){
    var map = new BMap.Map("allmap");
  //map.centerAndZoom(new BMap.Point(longt2,lat2), 15);
  map.centerAndZoom(new BMap.Point(lng,lat), 15);
  // 添加带有定位的导航控件
  var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  
  var marker = new BMap.Marker(new BMap.Point(lng,lat)); // 创建点
    marker.addEventListener("click",attribute);
    map.addOverlay(marker);    //增加点

}
function attribute(){
        var p = marker.getPosition();  //获取marker的位置
        alert("marker的位置是" + p.lng + "," + p.lat);    
    }
 
 
// 通过百度定位模块获取位置信息
function getPosBaidu(){
    outSet( "获取百度定位位置信息:" );
    plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
        outSet( "获取百度定位位置信息失败:"+e.message );
    },{provider:'baidu'});
}
        </script>
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
    </head>
    <body>
        <header id="header">
            <div class="nvbt iback" onclick="back(true);"></div>
            <div class="nvtt">Geolocation</div>
            <div class="nvbt idoc" onclick="openDoc('Geolocation Document','/doc/geolocation.html')"></div>
        </header>
        <div id="dcontent" class="dcontent">
            
            <p><button onclick="getPos()">click</button></p>
            <p><button onclick="getPosBaidu()">wifi定位</button></p>
        </div>
        <div id="allmap" style="height:50%">
        </div>
        <div id="output">
Geolocation可获取设备位置信息,包括经度、纬度、高度等信息。
        </div>
        
    </body>
    <script type="text/javascript" src="../js/immersed.js" ></script>
</html>
View Code

百度地图定位_第1张图片

 

 

还有就是h5自带的获取经纬度,获取的经纬度是谷歌的,必须要转换成百度的,而且ie浏览器读取的数据与其他的不同,就不写了,下面w3school链接里有

 

 

http://developer.baidu.com/map/jsdemo.htm#i8_1

http://www.w3school.com.cn/html5/html_5_geolocation.asp

你可能感兴趣的:(百度地图定位)