标记位置不被拾取-谷歌地图API v3

Marker Position not being picked up - Google Maps API v3

本文关键字:谷歌地图 API v3 位置      更新时间:2023-09-26

所以我试图找到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);

两点。首先,开始和结束都要这样做:

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

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

        start = location

其次,开始和结束的值是LatLng对象,这是Marker类的getPosition()函数返回的值。

在你的calcRoute函数中,你试图从它们创建LatLng对象,这将不起作用:

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

这个应该是:

originPlace = start;
destinationPlace = end;

Update:在构建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);
}