Google 地图 JavaScript API v3 距离矩阵发送纬度和经度但 return 地址

Question

每一个。

你可以看到这个link。
Google.

这个 link 显示参数变量 origin1 和变量 destinationB 是平均纬度和经度。
但我点击了计算距离 return 那里的地址。
我想要经纬度结果。
怎么可以？
我需要帮助。
谢谢各位朋友

Answer 1

DistanceMatrixService 的响应不包含 LatLng。

当您查看代码时，您会发现将通过地理编码请求 LatLng（用于绘制标记）。

当然，您可以使用硬编码的 LatLng，但结果可能会有所不同，因为由 DistanceMatrixService 编辑的位置 return 不能等于这些值。

如何获取 LatLng 而不管输入类型（地址或 LatLng）？

地理编码异步运行，无法保证结果 return 会按特定顺序进行。因此无法像演示那样创建字符串。

改为创建 DOMNode（您要在其中显示 LatLng），将这些节点作为参数传递给 addMarker，然后在地理编码回调中将节点的内容设置为所需的值

var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

var origin1 = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = new google.maps.LatLng(50.087, 14.421);

var destinationIcon = 'http://www.google.com/mapfiles/dd-end.png';
var originIcon = 'http://www.google.com/mapfiles/dd-start.png';

function initialize() {
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}

function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin1, origin2],
      destinations: [destinationA, destinationB],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, 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 = '';
    deleteOverlays();

    for (var i = 0; i < origins.length; i++) {
      //create a new "row"
      var row=outputDiv.appendChild(document.createElement('div'));
      
      var results = response.rows[i].elements;
      //origin-marker
      addMarker(origins[i], false,row.appendChild(document.createElement('code')));
      //a list for the destinations
      var list=row.appendChild(document.createElement('ul'));
      
      
      for (var j = 0; j < results.length; j++) {
        var item=list.appendChild(document.createElement('li'));
        item.appendChild(document.createTextNode(' to '));
        //destination-marker
        addMarker(destinations[j], true,item.appendChild(document.createElement('code')));
        item.appendChild(document.createTextNode([': ',
                                                  results[j].distance.text,
                                                  ' in ',
                                                  results[j].duration.text
                                                  ].join('')));

      }
    }
  }
}

function addMarker(location, isDestination,node) {
  var icon;
  if (isDestination) {
    icon = destinationIcon;
  } else {
    icon = originIcon;
  }
  geocoder.geocode({'address': location}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: icon
      });
      markersArray.push(marker);
      node.appendChild(document.createTextNode('('+marker.getPosition().toUrlValue()+')'));
      node.setAttribute('title',location);
      node.style.background=(isDestination)?'red':'green';
      google.maps.event.addDomListener(node,'click',function(){map.panTo(marker.getPosition())})
    } else {
      alert('Geocode was not successful for the following reason: '
        + status);
    }
  });
}

function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

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

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map-canvas {
        height: 100%;
        width: 50%;
      }
      #content-pane {
        float:right;
        width:48%;
        padding-left: 2%;
      }

      #outputDiv>div:nth-child(n+2){
         border-top:1px dotted silver;
      }
      #outputDiv code{
        cursor:pointer;
        color:#fff;
      }

<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
    <div id="content-pane">
      <button type="button" onclick="calculateDistances();">
        Calculate distances
      </button>
      <div id="outputDiv"></div>
    </div>
    <div id="map-canvas"></div>

Google 地图 JavaScript API v3 距离矩阵发送纬度和经度但 return 地址

Google Maps JavaScript API v3 Distance Matrix send lat and lng but return address

google-maps

google-maps-api-3