首页 > 其他分享 >vue获取手机GPS定位信息

vue获取手机GPS定位信息

时间:2023-11-24 14:55:04浏览次数:34  
标签:定位 vue oScript geolocation longitude alert latitude var GPS

<div id="demo">
    <div @click="getPosition">你的定位</div>
</div>

<script>
    let app=new Vue({
        el: "#demo",
        data() {
            return {
                      
            }
        },

        methods: {
            getPosition(){
                var options = {
                    enableHighAccuracy: true,
                    maximumAge: 1000
                };
                var self = this;
                if(navigator.geolocation){
                    //浏览器支持geolocation
                    navigator.geolocation.getCurrentPosition(function(position){
                    //经度
                    var longitude = position.coords.longitude;
                    //纬度
                    var latitude = position.coords.latitude;
                    self.loadMapApi(longitude,latitude);
                    }, self.onError, options);
                }else{
                //浏览器不支持geolocation
                alert("浏览器不支持地理定位")
                }
            },
            loadMapApi(longitude, latitude){
                var self = this;
                var oHead = document.getElementsByTagName('HEAD').item(0);
                var oScript= document.createElement("script");
                oScript.type = "text/javascript";
                oScript.src="http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";
                oHead.appendChild(oScript);
                oScript.onload = function(date){
                    var point = new BMap.Point(longitude, latitude);
                    var gc = new BMap.Geocoder();
                    gc.getLocation(point, function(addressInfo) {
                        alert(JSON.stringify(addressInfo))      
                    });
                }
            },
            one rror(error) {
                switch (error.code) {
                  case 1:
                  alert("位置服务被拒绝");
                  break;
                  case 2:
                  alert("暂时获取不到位置信息");
                  break;
                  case 3:
                  alert("获取信息超时");
                  break;
                  case 4:
                  alert("未知错误");
                  break;
              }
          }
       },
})                                        

 

标签:定位,vue,oScript,geolocation,longitude,alert,latitude,var,GPS
From: https://www.cnblogs.com/srqsl/p/17853745.html

相关文章

  • Vue实现动态路由导航
    Vue实现动态路由导航:https://blog.csdn.net/weixin_65950231/article/details/128983010?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170080675716800186579799%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=17008067571680018657......
  • Vue中页面访问拦截
    页面访问拦截目标:基于全局前置守卫,进行页面访问拦截处理说明:对于一个项目来说,大部分的页面,游客都可以直接访问,如遇到需要登录才能进行的操作,提示并跳转到登录,但是:对于支付页,订单页等,必须是登录的用户才能访问,游客不能进入该页面,需要做拦截处理路由导航守卫-全局前置守卫所有......
  • 基于uwb和IMU融合的三维空间定位算法matlab仿真
    1.算法运行效果图预览  2.算法运行软件版本matlab2022a 3.算法理论概述        基于UWB和IMU融合的三维空间定位算法是一个结合了无线脉冲波(UWB)和惯性测量单元(IMU)各自优势的定位方法。UWB通过测量信号的传输时间来计算距离,具有精度高、抗干扰能力强等优点......
  • Vue项目demo
    企业级项目目录api接口模块:发送ajax请求的接口模块utils工具模块:自己封装的一些工具方法模块Vant组件库第三方组件库:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/引入组件方式一.自动按需引入组件(推荐)babel-plugin-import是一款babel插件,它会在编译过程中将......
  • HTML+CSS+Javascript+Vue
    TableofContentsI.HTMLII.CSSGetStartedI.HTML按tab自动生成LabelMeaningPropertiesdiv块状元素span行间元素h1-h6标题iicon图标strong字体加粗a超链接img插入图片video插入视频controlsinput表单(输入账号、......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端......
  • java实现大文件的分片上传与下载(springboot+vue3)
    1.1项目背景对于超大文件上传我们可能遇到以下问题•大文件直接上传,占用过多内存,可能导致内存溢出甚至系统崩溃•受网络环境影响,可能导致传输中断,只能重新传输•传输时间长,用户无法知道传输进度,用户体验不佳1.2项目目标对于上述问题,我们需要对文件做分片传输。分片传输就是......
  • 使用绝对定位和列表创建二级菜单
    html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>使用绝对定位和列表创建二级菜单</title><linktype="text/css"href="css/menu.css"rel="stylesheet&......
  • uniapp+vue3中使用swiper和自定义header实现左右滑动的Tabs功能
    首先创建一个Tabs的Header,包含有一个下划线的指示器,在点击tabs的标题时候下划线会跟着动态的滑动下面是完整的Tabs的代码,可以看到定义了Tabs的background颜色样式,包含tab的宽度indicatorWidth,以及下划线的颜色indicatorColor主要的是tabList属性,通过tabList传入对应的tab数组得......
  • m基于Faster-RCNN网络的猫脸检测和猫眼定位系统matlab仿真,带GUI界面
    1.算法仿真效果matlab2022a仿真结果如下:  2.算法涉及理论知识概要       猫作为一种受欢迎的宠物,其图像在互联网上大量存在。对猫脸和猫眼进行准确检测和定位,在宠物识别、情感分析等领域具有广泛的应用价值。然而,由于猫脸和猫眼的多样性以及复杂背景的干扰,传统......