Question

在我的Ionic应用程序中，我使用以下选项实现了地理位置watchPosition。我的选项设置为每10秒触发一次，但每秒触发一次。而且通常每秒触发两次。

    import VueResource from 'vue-resource'
    Vue.use(VueResource)

    var app = new Vue({

        el: '#form-id',
        data: {
            formStatus: false,
            blog: [{
                id: '',
                title: '',

            }
            ]
        },
        methods: {
        },
        mounted: function(){
        }
    })

当我的设备准备就绪时，我使用addListener触发watchPosition函数：

原始呼叫是这样的： var watchID = null; document.addEventListener（“ deviceready”，watchPosition）;

然后我更改为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dexterous - Technology News Site</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body>  <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light"> <a class="navbar-brand mb-0 h1">Dexterous</a> <ul class="navbar-nav"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Highlights</a></li> <li class="nav-item"><a class="nav-link" href="#">Categories</a></li> </ul> </nav>  <div class="container-fluid"> <div class="row"> <div class="col">  <div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000"> <ol class="carousel-indicators"> <li data-target="#dexterous-slides" data-slide-to="0" class="active"></li> <li data-target="#dexterous-slides" data-slide-to="1" class="active"></li> <li data-target="#dexterous-slides" data-slide-to="2" class="active"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>  </div> </div>  <div id="form-id"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h5>Post Management</h5> </div> <div class="card-body"> <button v-on:click="formStatus = !formStatus" class="btn btn-light">➕ Add new Post</button> <button v-on:click="" class="btn btn-light"> Manage Post</button> </div> </div> </div> </div>  <div class="row" v-if="formStatus"> <div class="col-md-12 mt-3"> <div class="card bg-light"> <div class="card-header"> <h3>Create a Post</h3> </div> <div class="card-body"> <form> <div class="form-group"> <label for="blogTitle"><h5>Title:</h5></label> <input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title..."> </div> <div class="form-group"> <label for="blogContent"><h5>Content:</h5></label> <textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."></textarea> </div> <button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2">Add Post</button> </form> </div> </div> </div> </div> </div>  <div class="row mt-3"> <div class="col-md-4"> <div class="card w-100" style="width:18rem;"> <div class="card-header"><h5>Year</h5></div> <ul class="list-group list-group-flush"> <li class="list-group-item">2017</li> <li class="list-group-item">2018</li> <li class="list-group-item">2019</li> </ul> </div> <div class="card w-100 mt-3" style="width:18rem;"> <div class="card-header"><h5>Posts</h5></div> <ul class="ml-3 list-group list-group-flush"> <li class="list-group-item">Welcome to Dexterous</li> <li class="list-group-item">New Javascript JS</li> <li class="list-group-item">2019</li> </ul> </div> </div>  <div class="col-md-8"> <div class="card"> <img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript"> <div class="card-body"> <h5 class="card-title">Welcome to Dexterous</h5> <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p> <a href="#" class="btn btn-dark">Read more</a> </div> </div> </div> </div> <div class="row justify-content-end mb-3 "> <div class="col-md-8"> <div class="card bg-light"> <img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript"> <div class="card-body"> <h5 class="card-title">New Javascript JS</h5> <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p> <a href="#" class="btn btn-dark">Read more</a> </div> </div> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../app.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>

function watchPosition() {
   var options = {
      maximumAge: 10000,
      timeout: 10000,
      enableHighAccuracy: true,
   }
   watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(pos) {
      ...
   }
   function onError(error) {
      ...
   }
}

它仍然每秒射击一次。

然后我简单地用document.addEventListener("deviceready",setupWatch) ;代替了，我意识到eventListener已经在Ionics function setupWatch() { // global var here so it can be cleared on logout (or whenever). activeWatch = setInterval(watchPosition, 5000); }内部，因此不需要eventListener。但是，现在仅调用此命令便会每秒触发watchPosition，例如每秒5次，而不是每5秒一次。：

addEventListener

有关watchPosition最佳做法的其他问题。继续调用此函数的理想超时是多少...每秒是否可以，是否加载/处理过多，是否会更快耗尽电池等？

Answer 1

您使用的timeout和maximumAge并未定义您从浏览器获得答案的频率。这是MDN关于这些属性的说明：

PositionOptions.timeout是一个正的长值，表示允许设备返回位置的最大时间长度（以毫秒为单位）。

PositionOptions.maximumAge是一个长整数，表示可以接受返回的可能缓存位置的最长使用期限（以毫秒为单位）。

source

我建议您将回调中的值存储在变量中，并使用另一个setInterval以可以定义的速率返回值。

编辑

如果要处理回答率，可以使用函数getCurrentPosition，该函数将仅触发一次回调（source）

Answer 2

在我的代码中，watchPosition连续触发两次，但是出于明显的原因，getCurrentPostion总是仅触发一次。

解决方案1是使用getCurrentPosition，然后设置一个计时器，以在X毫秒后重新检查该位置并根据需要进行更新。

解决方案2（出于各种其他原因，我曾使用过）将使用watchPosition，但要让回调仔细检查long / lat是否已实际更改。如果不是，则忽略其余功能。例如：

var oldlong = "";
var oldlat = "";

navigator.geolocation.watchPosition(onGpsChangeSuccess,onGpsError,{
   maximumAge: 10000, 
   enableHighAccuracy: false, 
   timeout: 15000 
 }
);

var onGpsChangeSuccess = function(){
    //Watch was triggered...

    if(oldlong != position.coords.longitude && oldlat!=position.coords.longitude){

        //Changes detected
        oldlong = position.coords.longitude;
        oldlat = position.coords.latitude; 
        performTheRestOfYourFunctionHere

   }else{
       //No changes detected
   }
}

我们不必执行此附加检查，但是如果观察者有错误，则最好保持安全。

Answer 3

您连续的Lat / Lng读数相同会令我感到惊讶。也许“准确度”表变化了，或者一个来源是GPS，另一个是电信大楼。在户外还是室内？

无论如何，我都建议filtering读数适合您的应用。恕我直言，忽略不准确或无趣的读数是所有GPS应用程序都必须满足的。

地理位置监视位置每秒触发一次

3 个答案: