js获取高德地图自身定位

简介: js获取高德地图自身定位

前言

本文带你了解一下js如何获取自身的当前定位

*在写之前一定要引入自己在高德API上的key值

1.引入key

代码如下(示例):

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=edd291afc0740e0468cc222bf19a88fe"></script>

2.设置地图容器

代码如下(示例):

<div id="map_wrapper"></div> //记住一定要加宽高

3.地图初始化

代码如下(示例):

var map = new AMap.Map('map_wrapper', {
     resizeEnable: true,
   zoom:15, //number 地图显示的缩放级别 : 3-20级
});

4.获取高精定位

代码如下(示例):

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,//高精定位,默认true,可不写
    timeout: 10000,// 设置获取定位后的加载时间
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量
    zoomToAccuracy: true,     
    buttonPosition: 'RB'//设置定位按钮的显示位置
  })
geolocation.getCurrentPosition(function(status,result) {
  if(status=='complete'){
    onComplete(result)
  }else{
    onError(result)
  }
 })  
 function onComplete (data) {
    //具体的定位详情   
   }
function onError (data) {
  // 定位报错处理
   }
})
相关文章
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
301 1
|
JSON 前端开发 JavaScript
javascript:layui实现定位、查询数据以及select筛选的组合功能
javascript:layui实现定位、查询数据以及select筛选的组合功能
349 0
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
329 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
2月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
267 0
|
6月前
|
移动开发 定位技术 API
编程笔记 html5&css&js 035 HTML 地理定位
编程笔记 html5&css&js 035 HTML 地理定位
|
JavaScript 定位技术 API
js使用高德地图进行地点标注
使用高德地图进行地点标注可以采用以下步骤:
160 0
|
6月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本
291 0
|
JavaScript 前端开发 定位技术
js中引用高德地图
js中引用高德地图
95 0
|
6月前
|
JavaScript 前端开发 定位技术