Question

我正在开发一个应用程序的搜索字段，用户在其中键入地址或企业名称，系统会动态返回我使用Google Maps Distance Matrix API进行计算但参数＆＃39;起源＆＃39;不接受返回的HTML的地理位置传递的值

{＆＃34; rows＆＃34;：[{＆＃34; elements＆＃34;：[{＆＃34; status＆＃34;：＆＃34; ZERO_RESULTS＆＃34;}]}]，＆＃ 34; originAddresses＆＃34;：[＆＃34; nan，nan＆＃34;]，＆＃34; destinationAddresses＆＃34;：[＆＃34; - 25.494926，-49.294444999999996＆＃34;]}

＆＃39; destinationAddress＆＃39;我手动进行测试。

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

代码段

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>

谷歌地图距离矩阵错误＆＃34; originAddresses＆＃34;：[＆＃34; nan，nan＆＃34;]

1 个答案: