如何在离子应用程序中添加实时位置跟踪答案

【问题标题】：How to add live location tracking in ionic app如何在离子应用程序中添加实时位置跟踪
【发布时间】：2017-04-22 04:46:14
【问题描述】：

我还想将 gmap 导航等功能添加到蓝点指针等离子混合应用程序中。以前我使用地理定位 API，但是当我改变我的位置时位置没有改变（我看起来是静态的）。我想添加像谷歌地图这样的实时位置跟踪。谁能建议我正确的方法？

【问题讨论】：

pubnub.com/blog/…
谢谢 Edison，但我有一个问题，真的只有使用 google api 才有可能吗？如果我不想使用其他依赖项，那么实现这一点的方法是什么？
watchPosition() 来自 Google Maps API 的函数。它会返回您在地图中更改标记所需的所有信息。
@克里斯蒂亚诺。 ..你能给我推荐一些例子来更好地理解吗？谢谢！

标签： javascript google-maps-api-3 ionic-framework frameworks

【解决方案1】：

使用 watchPosition 并更改地图上的标记。比如：

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 返回 Geolocation 的当前位置

watchPosition 每次更改时都会返回当前位置。因此，使用此功能，您可以每次使用 setPosition 更改地图上的标记并将坐标传递给它。

【讨论】：

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

【解决方案2】：

您可以将本机方法setMyLocationEnabled(true) 应用于您的map 属性。

看我的例子：

让元素：HTMLElement = document.getElementById('map');
this.map = this.googleMaps.create(element);
this.map.setMyLocationEnabled(true);

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

【讨论】：

【解决方案3】：

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

      if (navigator.geolocation.watchPosition(watchSuccess, watchError, watchOptions)) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        map.setCenter(pos);
        that.MyLocation = new google.maps.LatLng(pos);

      }, function() {

      });
    } else {
      // Browser doesn't support Geolocation
    }

    directionsService.route({
    origin: this.MyLocation,
    destination: this.Destination,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
  
}
// watch user's position
// change marker location everytime position is updated
 watchSuccess(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // set marker position
    marker.setPosition(latLng);
}

【讨论】：