通过nivagator获取当前位置

// 页面
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>

// js代码
var x=document.getElementById("demo");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    }else{
        console.log('您的浏览器不支持获取位置信息');
        x.innerHTML="您的浏览器不支持获取位置信息.";
    }
}
function showPosition(position){
  // 1. 简单获取当前位置
    x.innerHTML="Latitude(纬度): " + position.coords.latitude + "<br />Longitude(经度): " + position.coords.longitude;  
    console.log("Latitude(纬度): " + position.coords.latitude + "<br />Longitude(经度): " + position.coords.longitude)
  
  // 2. 使用谷歌地图显示当前位置
    var latlon = position.coords.latitude+ "," +position.coords.longitude;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" + latlon +"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="![]("+img_url+")";

}
function showError(error){
    switch(error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML="用户拒绝访问位置信息."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML="位置信息不可用."
          break;
        case error.TIMEOUT:
          x.innerHTML="获取位置信息超时."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML="未知错误."
          break;
    }
}

在线调试1.简单获取当前位置
在线调试2. 使用谷歌地图显示当前位置

将原始坐标转换为百度坐标

参考 原始坐标转换百度地图API , google坐标转换为百度坐标

var lng = position.coords.longitude;
    var lat = position.coords.latitude;
    // 调用百度地图api显示
    var map = new BMap.Map("map");
    var ggPoint = new BMap.Point(lng, lat);
    map.centerAndZoom(ggPoint, 15);
    map.addControl(new BMap.NavigationControl());
    console.log('原始：'+lng+','+lat);
   
    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        map.addOverlay(marker);
        console.log(data.points[0]);   // 转换过的坐标
        var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        map.setCenter(data.points[0]);
      }
    }

    setTimeout(function(){
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 1, 5, translateCallback); 
        //  转换参数参考下图
    }, 1000);

在线调试3百度地图API
百度坐标转换参数

转换参数

高德地图转换坐标

参考 高德地图API

var lng = position.coords.longitude;
var lat = position.coords.latitude;
console.log('原始：'+lng+','+lat);
AMap.convertFrom([lng,lat], 'gps',
    function(status,result){
        console.log('status:'+status)
        console.log(result.locations[0])  // 获得转换后的经纬度
        lng = result.locations[0].lng;
        lat = result.locations[0].lat;
    })
// 声明地图
var map = new AMap.Map('container',{
    zoom: 10,
    center: [lng,lat]//经度值在前，纬度值在后 new AMap.LngLat(116.39,39.9)
});

// 标记
var marker = new AMap.Marker({
    position: [lng, lat],//marker所在的位置
    map:map//创建时直接赋予map属性
});

在线调试
高德坐标转换

高德坐标转换

使用百度api 根据经纬度获取当前位置信息

var gc = new BMap.Geocoder(); 
gc.getLocation(ggPoint, function(rs) {
    console.log(rs);
    var addComp = rs.addressComponents;
    var mapAddress = addComp.province+addComp.city + addComp.district
    + addComp.street + addComp.streetNumber;
    console.log('mapAddress:',mapAddress) // 浙江省杭州市滨江区浦沿路
}); 

在线调试获取当前位置信息