Google Maps API：将方向服务与watchPosition地理定位相结合

Question

我试图使用谷歌的方向服务显示一张地图，其中有原点、目的地和连接两者的蓝色方向线。然而，我试图使用watchPosition作为LAT/LNG的原产地。

到目前为止，一切都显示正确，除了绿色原点标记不移动，因为手表位置更新与新的LAT/LNG坐标。我想做的是可能的吗？或者我只需要创建第三个标记来跟随用户的坐标？

以下是我脚本中的内容：

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var mapOptions = {
        zoom:7,
        center: new google.maps.LatLng(38.5815719, -121.4943996)
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
      calcRoute();
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
} else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
}

  var options = {
    map: map,
    position: new google.maps.LatLng(<%= @order.origin_lat %>, <%= @order.origin_lng %>),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}



function calcRoute() {
    if(navigator.geolocation) {
        navigator.geolocation.watchPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var request = {
                  origin: pos,
                  destination: new google.maps.LatLng(<%= @order.user.latitude %>, <%= @order.user.longitude %>),
                  travelMode: google.maps.TravelMode.DRIVING
              };
            directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
            });
        },

        function() {
        handleNoGeolocation(true);
        });
    } else {
    // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

在移动web中，这看起来并不容易实现，所以我只创建了第三个根据用户位置移动的标记。