Javascript 如何在ionic应用程序中添加实时位置跟踪

我想把gmap导航等功能添加到爱奥尼亚混合应用程序中，比如蓝点指针。以前我使用地理定位API，但当我改变位置时，位置并没有改变（我看起来是静态的）。我想添加像谷歌地图一样的实时位置跟踪。有人能给我建议正确的方法吗？

使用观察位置并在地图上更改标记。比如：

var myMarker = null;

// get current position
navigator.geolocation.getCurrentPosition(showPosition);

// show current position on map
function showPosition(position) {
   myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
      map: new google.maps.Map(document.getElementById("map")),
      icon: 'img/icons/myicon.png'
  });
}

// watch user's position
navigator.geolocation.watchPosition(watchSuccess, watchError, watchOptions);

// change marker location everytime position is updated
function watchSuccess(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // set marker position
    marker.setPosition(latLng);
}

您还可以使用$cordovaGeolocation插件。看看插件文档

getCurrentPosition返回地理位置的当前位置

---

watchPosition每次更改时返回当前位置。因此，使用此函数，您可以每次使用setPosition更改地图上的标记，并向其传递坐标。

您只需将本机方法

setMyLocationEnabled（true）

应用于

map

属性即可

参见我的示例：

let元素：HTMLElement=document.getElementById（'map'）
this.map=this.googleMaps.create（元素）
this.map.setMyLocationEnabled（true）

---

最后一行将激活本机当前位置标记。

在我的情况下，它找不到watchSuccess、watchError、watchOptions。这是我的代码

if（navigator.geolocation.watchPosition（watchSuccess、watchError、watchOptions））{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
地图设置中心（pos）；
that.MyLocation=新的google.maps.LatLng（pos）；
}，函数（）{
});
}否则{
//浏览器不支持地理位置
}
方向服务.路线({
来源：这个.MyLocation，
目的地：这个，目的地，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
//观察用户的位置
//每次更新位置时更改标记位置
观察成功（职位）{
var latLng=新的google.maps.latLng（position.coords.latitude，position.coords.longitude）；
//设置标记位置
标记器设置位置（板条）；
}

谢谢爱迪生，但我有一个问题，那就是只有使用谷歌api才能实现吗？如果我不想使用额外的依赖项，那么实现它的方法是什么？

watchPosition（）

googlemapsapi函数。它返回您在地图中更改标记所需的所有信息。@Cristiano。。你能给我举一些例子让我更好地理解吗？谢谢它给出了很好的结果，但它也显示了旧的标记在每次位置改变后，如何只显示一个标记（最新的位置）。谢谢克里斯蒂亚诺你的建议解决了我的问题。代码中有一处更正，而不是“marker.setPosition（latLng）”；“我们需要编写”myMarker.setPosition（latLng）；“@Sudodev:-上面的例子工作正常，但你能告诉我如何通过用户位置移动地图吗？