javascript - 未拾取标记位置 - Google Maps API v3

Question

所以我试图找到两个标记之间的距离。在代码中，我在左键单击上放置一个标记，并将标记的位置保存到变量“start”中。然后，我在左键单击上放置第二个标记，并将该标记的位置保存到变量端。然后，我调用一个函数来计算标记之间的距离，但 getPosition() 函数似乎没有以正确的格式获取 LatLng。我有点困惑为什么它不起作用。

代码如下所示。任何帮助将不胜感激。谢谢

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var start;
var end;
var markersArray = [];
var originPlace = new google.maps.LatLng(0,0);
var destinationPlace = new google.maps.LatLng(0,0);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  google.maps.event.addListener(map,'click',function(event) { 
    placeMarker(event.latLng); 
  }); 
}

function placeMarker(location) {
  if (markersArray.length == 0) {
            marker = new google.maps.Marker({
                position: location,
                map: map,
                title: location.toString()
            });

            // add marker in markers array
            markersArray.push(marker);
            start = marker.getPosition();
            alert(start);
        }
        else if(markersArray.length == 1)
        {
             marker = new google.maps.Marker({
                position: location,
                map: map,
                title: location.toString()
            });

            // add marker in markers array
            markersArray.push(marker);
            end = marker.getPosition();
            calcRoute(start, end);
        }
        else
        {

        }
}


function calcRoute(start, end) {
  originPlace = new google.maps.LatLng(start);
  destinationPlace = new google.maps.LatLng(end);

  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
        origins: [originPlace],
        destinations: [destinationPlace],
        travelMode: google.maps.TravelMode.DRIVING
    }, callback);

}

function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';

     for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
        outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
            + ': ' + results[j].distance.text + ' in '
            + results[j].duration.text + '<br>';
      }
    }
  }
}


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

Answer 1

两点。首先，您在开始和结束时都这样做:

        marker = new google.maps.Marker({
            position: location,
            map: map,
            title: location.toString()
        });

        start = marker.getPosition(); 

为什么不直接使用您已经知道的 location 值，而不必调用 getPosition()？

        start = location

其次，开始和结束的值是 LatLng 对象，这就是 Marker class's getPosition() function 的内容。返回。

在 calcRoute 函数中，您尝试从中创建 LatLng 对象，但这是行不通的:

originPlace = new google.maps.LatLng(start);
destinationPlace = new google.maps.LatLng(end);

这应该是:

originPlace = start;
destinationPlace = end;

更新:此外，在构造 request 对象时，您还将 originPlace 和 destinationPlace 放入数组中，这导致了您在评论中提到的错误。这是我使用的对我有用的代码。

function placeMarker(location) {
    if (markersArray.length == 0) {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            title: location.toString()
        });

        // add marker in markers array
        markersArray.push(marker);
        start = location;
    } else if (markersArray.length == 1) {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            title: location.toString()
        });

        // add marker in markers array
        markersArray.push(marker);
        end = location;
        calcRoute(start, end);
    }
}


function calcRoute(start, end) {
    originPlace = start;
    destinationPlace = end;

    var request = {
        origin: originPlace,  // NOTICE THIS ONE ISN'T IN AN ARRAY...
        destination: destinationPlace,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
        origins: [originPlace],  // ... BUT THIS ONE STILL IS
        destinations: [destinationPlace],
        travelMode: google.maps.TravelMode.DRIVING
    }, callback);
}