1. 90前端首页
  2. 前端开发
  3. JavaScript

高德地图---获取用户地理位置Geolocation

一、前提

// 必要的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) {
    // 定位出错
  }
})

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022055374

展开阅读全文

发表评论

登录后才能评论