百度地图定位

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_30916125

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/hongdada/p/5175617.html

这里定位使用百度地图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

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

<!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="http://api.map.baidu.com/api?v=2.0&ak=hGzGgrbYoSHskeCyN0eNNEjI"></script>
    <title>浏览器定位</title>
</head>
<body>
    <div id="allmap"></div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        //    var point = new BMap.Point(116.331398,39.897445);
        //    map.centerAndZoom(point,12);
        //添加鼠标滚动缩放
        map.enableScrollWheelZoom();

        //添加缩略图控件
        map.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
        //添加缩放平移控件
        map.addControl(new BMap.NavigationControl());
        //添加比例尺控件
        // map.addControl(new BMap.ScaleControl());
        //添加地图类型控件
        //map.addControl(new BMap.MapTypeControl());

        //设置标注的图标
        var icon = new BMap.Icon("http://www.icosky.com/icon/png/Avatar/Elite%20Soldiers%20Weapons/Gas%20Soldier%20with%20Weapon.png", new BMap.Size(100, 100));
        //设置标注的经纬度
        // var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});

        var marker = {};
        //百度地图定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                //alert('您的位置：'+r.point.lng+','+r.point.lat);
                showPoint(r);
            }
            else {
                alert('failed' + this.getStatus());
            }
        }, { enableHighAccuracy: true })

        var content = "<table>";
        content = content + "<tr><td> 编号：001</td></tr>";
        content = content + "<tr><td> 地点：淄博市张店区</td></tr>";
        content = content + "<tr><td> 时间：2014-09-26</td></tr>";
        content += "</table>";
        var infowindow = new BMap.InfoWindow(content);

        function showPoint(r) {
            var point = new BMap.Point(r.point.lng, r.point.lat);
            map.centerAndZoom(point, 15);
            map.addControl(new BMap.ScaleControl());
            marker = new BMap.Marker(point, { icon: icon });
            map.addOverlay(marker);
            marker.addEventListener("click", function () {
                this.openInfoWindow(infowindow);
            });
            showBounds();
        }

        // 编写自定义函数,创建标注
        function addMarker(point, label) {
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            marker.setLabel(label);
            marker.addEventListener("click", function () {
                console.dir(label);
                console.log(label.content);
            });
        }
        function showBounds() {
            // 随机向地图添加25个标注
            var bounds = map.getBounds();
            var sw = bounds.getSouthWest();
            var ne = bounds.getNorthEast();
            var lngSpan = Math.abs(sw.lng - ne.lng);
            var latSpan = Math.abs(ne.lat - sw.lat);
            for (var i = 0; i < 25; i++) {
                var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
                var label = new BMap.Label("<span style='display:none'>asdfasd</span>我是id=" + i, { offset: new BMap.Size(20, -10) });
                addMarker(point, label);
            }
        }
    </script>
</body>
</html>