高德地图浏览器定位

一、前提

// 必要的JS API脚本 -----顺序同步加载方式 
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='你的key值'"></script>
// dom--容器 注意要设置css宽高哦
<div id="map_wrapper"></div>

二、js实现逻辑功能
创建地图，获取用户地理位置（3种方式）
1) 地图初始化加载定位到当前城市。
2) 浏览器定位。
3) IP定位获取当前城市信息
ps: 需求需要定位到具体的位置，以下主要是浏览器定位，1和3只定位到城市

// 1) 地图初始化加载定位到当前城市。 ps:只能获取到城市级别信息
var map = new AMap.Map('map_wrapper', {
    resizeEnable: true,
    zoom:20, //number 地图显示的缩放级别 : 3-20级
    //zooms: [5,18] 地图显示的缩放级别范围 在PC上，默认为[3,18]，在移动设备上，默认为[3,19],
});

// 2)  浏览器定位。想获取到具体的位置就要借助浏览器定位,
// 高德JS API提供了AMap.Geolocation插件来实现定位

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    // 是否使用高精度定位，默认：true
    enableHighAccuracy: true,
    // 设置定位超时时间，默认：无穷大
    timeout: 10000,
    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
    buttonOffset: new AMap.Pixel(10, 20),
    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    zoomToAccuracy: true,     
    //  定位按钮的排放位置,  RB表示右下
    buttonPosition: 'RB'
  })
  //addControl(obj:Object) 添加控件,可以是任何插件对象
  map.addControl(geolocation);
 //---- 
  //getCurrentPosition(callback:function(status,result){})获取用户当前的精确位置信息
  geolocation.getCurrentPosition(function(status,result) {
    if(status=='complete'){
      onComplete(result)
    }else{
      onError(result)
    }
  })  
//或
//geolocation.getCurrentPosition()
//AMap.event.addListener(geolocation, 'complete', onComplete)
// AMap.event.addListener(geolocation, 'error', onError)
//----
  function onComplete (data) {
    // data是具体的定位信息
  }

  function onError (data) {
    // 定位出错
  }
})

<script type="text/javascript">
    var map, geolocation;
    var lng, lat;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 11,
        center: [116.397428, 39.90923]//默认的地图中心经纬度
    });
 
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    });
 
    //解析定位结果
    function onComplete(data) {
        var str = ['定位成功'];
        //获取当前地址
        //所在省
        var province = data.addressComponent.province;
        //所在城市
        var city = data.addressComponent.city;
        if (city.length == 0) {
            str.push('所在城市：' + province);
        } else {
            str.push('所在省：' + province);
            str.push('所在城市：' + city);
        }
        //所在区
        var district = data.addressComponent.district;
        str.push('所在地区：' + district);
        //所在乡镇
        var township = data.addressComponent.township;
        str.push('所在乡镇：' + township);
        //格式化地址
        var formattedAddress = data.formattedAddress;
        str.push('详细地址：' + formattedAddress);
 
        //获取当前经度纬度
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if (data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        } //如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');
        //调试弹窗
        /*lng = data.position.getLng();
        lat = data.position.getLat();
        alert(data.position.getLng() + "," + data.position.getLat());*/
    }
 
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败: <br/> <pre>' + JSON.stringify(data, null, 2) + '</pre>';
    }
</script>