标记位置未被提取 - Google Maps API v3

时间:2014-03-14 11:51:20

标签: javascript google-maps google-maps-api-3

所以我试图找到2个标记之间的距离。在代码中,我在左键单击上放置一个标记,并将标记的位置保存到变量" 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);

1 个答案:

答案 0 :(得分:0)

两点。首先,你要为开始和结束做这件事:

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

        start = marker.getPosition(); 

为什么不使用您已经知道的location值,而不必调用getPosition()?

        start = location

其次,start和end的值是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);
}