Vue获取当前的位置信息、经纬度

通过navigator.geolocation对象中的getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置,并查询定位硬件来获取最新信息。当定位被确定后,定义的回调函数就会被执行。

注意: getCurrentPosition() 会尽快返回一个低精度结果,这在您不关心准确度只关心快速获取结果的情况下很有用。

 navigator.geolocation.getCurrentPosition()用法:

getLongitudeLatitude() {
      //如果该对象存在,那么地理位置服务可用。
      if ('geolocation' in navigator) {
        /* 地理位置服务可用 */
        var options = {
          enableHighAccuracy: true, //布尔值,表示系统是否使用最高精度来表示结果,注意,这会导致较慢的响应时间或者增加电量消耗(比如对于支持gps的移动设备来说)。如果值为false ,设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
          timeout: 5000, //它表明的是设备必须在多长时间(单位毫秒)内返回一个位置。默认直到获取到位置才会返回值。
          maximumAge: 0 //表明可以返回多长时间(即最长年龄,单位毫秒)内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置,而且必须去获取一个真实的当前位置。默认0
        }
        function success(position) {
          //position.coords (只读) 返回一个定义了当前位置的Coordinates对象。
          //position.timestamp (只读) 返回一个时间戳DOMTimeStamp, 这个时间戳表示获取到的位置的时间。
          var lat = position.coords.latitude //当前位置的纬度
          var lng = position.coords.longitude //当前位置精度
        }
        function error(err) {
          var errorType = ['您拒绝共享位置信息', '获取不到位置信息', '获取位置信息超时']
          console.log(errorType[err.code - 1])
        }

        navigator.geolocation.getCurrentPosition(success, error, options)
      } else {
        /* 地理位置服务不可用 */
        console.log('无法获取您的位置,请检查定位是否开启或刷新重试')
      }
    }

  • 3
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2中使用高德地图进行坐标标点,你可以按照以下步骤进行操作: 1. 首先,在你的HTML文件中导入高德地图的API。你可以使用以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 确保将`您申请的key值`替换为你在高德地图开发者平台申请的API密钥。 2. 在Vue组件中导入`coordinateMap.vue`组件。你可以使用以下代码: ```javascript import CoordinateMap from '@/components/coordinateMap.vue' ``` 确保路径正确,根据你的项目结构进行相应的调整。 3. 注册`CoordinateMap`组件。在Vue组件的`components`选项中添加以下代码: ```javascript components: { CoordinateMap } ``` 4. 在Vue组件中使用`CoordinateMap`组件。在模板中添加以下代码: ```html <CoordinateMap @giveLnglat="getLnglat"></CoordinateMap> ``` `@giveLnglat`是一个自定义事件,用于从`CoordinateMap`组件中获取用户当前点击位置经纬度。`getLnglat`是你在Vue组件中定义的方法,用于处理获取到的经纬度数据。 5. 在Vue组件中定义`getLnglat`方法。在Vue组件的方法中添加以下代码: ```javascript methods: { getLnglat(lnglat) { console.log(lnglat) } } ``` 这个方法将获取到的经纬度数据作为参数,并在控制台中打印出来。你可以根据需要对经纬度数据进行进一步处理或使用。 通过以上步骤,你就可以在Vue2中使用高德地图进行坐标标点了。记得替换相关的API密钥和路径,根据你的具体需求进行适当的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [基于Vue结合高德地图api做的一个坐标拾取组件](https://blog.csdn.net/qq_37131884/article/details/104071925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值