谷歌地图距离矩阵错误“originAddresses”：[“nan，nan”]

Question

我正在为应用程序开发一个搜索字段，其中用户键入地址或机构名称，系统会动态返回我已使用 Google Maps Distance Matrix API 进行计算，但参数“origins”没有接受由返回的 HTML 的地理位置传递的值

{"rows": [{"elements": [{"status": "ZERO_RESULTS"}]}], "originAddresses": ["nan, nan"] , "destinationAddresses": ["- 25.494926, - 49.294444999999996"]}

我手动测试的“destinationAddress”。

function initMap() {
    const autocomplete = new google.maps.places.Autocomplete(document.getElementById('searchBox'));

    var x = document.getElementById("geolocation");

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Não foi possível obter sua localização atual. A versão atual do navegador é antiga ou a detecção de localização está desabilitada.";
    }

    function showPosition (position) {
        //Put on div the id geolocation the logitude and latitude
        x.innerHTML = position.coords.latitude + ", " + position.coords.longitude

        getDistance();
    }
}

function getDistance() {
    // Get what is written in the div with id geolocation and put in variable cdata
    // Giving alert in cdata correctly displays the user's current longitude and latitude
    var cdata = document.getElementById('geolocation').innerHTML;
    var origin1 = new google.maps.LatLng(cdata); //retorn ['nan, nan'] ?? wtf
    var destination = new google.maps.LatLng(-25.494926, -49.294445);

    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
        {
            origins: [origin1],
            destinations: [destination],
            travelMode: 'DRIVING'
        }, callback);
}

function callback(response, status) {
    var x = document.getElementById("geolocation");
    alert(JSON.stringify(response));
}

$("#searchForm").keyup(function () {
    var search = $("#searchBox").val();
    $.post('includes/establishmentSearch.inc.php', {searchForm: search}, function(data){
        $('#searchResponse').html(data);
        if (search == '') {
            $("#searchResponse").empty();
            $(".groupSepare").show();
        } else {
            $(".groupSepare").hide();
        }
    });
});

详细信息：我只使用纬度和经度，我没有使用任何谷歌地图，因为我只需要位置数据。

Answer 1

cdata 是一个字符串。 google.maps.LatLng 构造函数接受两个数字作为参数。

var cdata = document.getElementById('geolocation').innerHTML;
var coords = cdata.split(",");
var origin1 = new google.maps.LatLng(coords[0], coords[1]); 

proof of concept fiddle

代码 sn-p：

function initMap() {
  const autocomplete = new google.maps.places.Autocomplete(document.getElementById('searchBox'));

  var x = document.getElementById("geolocation");

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Não foi possível obter sua localização atual. A versão atual do navegador é antiga ou a detecção de localização está desabilitada.";
  }

  function showPosition(position) {
    //Put on div the id geolocation the logitude and latitude
    x.innerHTML = position.coords.latitude + ", " + position.coords.longitude

    getDistance();
  }
}

function getDistance() {
  // Get what is written in the div with id geolocation and put in variable cdata
  // Giving alert in cdata correctly displays the user's current longitude and latitude
  var cdata = document.getElementById('geolocation').innerHTML;
  console.log(cdata);
  var coords = cdata.split(",");
  var origin1 = new google.maps.LatLng(coords[0], coords[1]);
  var destination = new google.maps.LatLng(-25.494926, -49.294445);

  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [origin1],
    destinations: [destination],
    travelMode: 'DRIVING'
  }, callback);
}

function callback(response, status) {
  var x = document.getElementById("geolocation");
  alert(JSON.stringify(response));
}

$("#searchForm").keyup(function() {
  var search = $("#searchBox").val();
  $.post('includes/establishmentSearch.inc.php', {
    searchForm: search
  }, function(data) {
    $('#searchResponse').html(data);
    if (search == '') {
      $("#searchResponse").empty();
      $(".groupSepare").show();
    } else {
      $(".groupSepare").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchBox" value="Nebraska" />
<div id="geolocation"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>