Question

我正在使用AngularJS和JavaScript从事位置跟踪模块。我的目标是根据接收纬度和经度以及标记的移动来设置个人用户的位置。在下面的代码我得到标记但不移动。请建议

var marker = new google.maps.Marker({
    position: pos,
    map: $scope.map
});
for (var k = 0; k < $scope.arr.length; k++) {
    var found = $scope.arr.some(function (el) {
        return el.from === name;
    });
    if (!found) {
        $scope.arr.push({
            from: name,
            marker: marker,
            latitude: $scope.LocInfor.latitude,
            longitude: $scope.LocInfor.longitude
        });
    }
    var pos = new google.maps.LatLng($scope.arr[k].latitude, $scope.arr[k].longitude);
    marker.setPosition(pos);
}

Answer 1

在javascript中，navigator.geolocation.watchPosition()方法用于注册每次设备位置更改时将自动调用的处理函数。您也可以选择指定错误处理回调函数。

<强>语法：

navigator.geolocation.watchPosition(success[, error[, options]])

成功

将Position对象作为输入参数的回调函数。
错误（可选）

一个可选的回调函数，它将PositionError对象作为输入参数。
选项（可选）

可选的PositionOptions对象。

现在，对于您的问题，您可以使用此代码。请注意，您应该使用Google的API密钥替换YOUR-API-KEY：

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  <style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
   <div id="map"></div>
<script>

var map;
var marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: "Test"
        });


  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    getLocationUpdate ();
  }

  function showLocation(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        marker.setPosition(pos);
        map.setCenter(pos);


        alert("Latitude : " + pos.lat + " Longitude: " + pos.lng);
     }

  function errorHandler(err) {
        if(err.code == 1) {
           alert("Error: Access is denied!");
        }

        else if( err.code == 2) {
           alert("Error: Position is unavailable!");
        }
     }

     function getLocationUpdate(){
        if(navigator.geolocation){
           // timeout at 60000 milliseconds (60 seconds)
           var options = {
              enableHighAccuracy: false,
              timeout: 5000,
              maximumAge: 0
            };
           var geoLoc = navigator.geolocation;
           geoLoc.watchPosition(showLocation, errorHandler, options);
        }
     }



</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap">
</script>

如何在用户移动时移动标记位置？

1 个答案: