Google地图距离矩阵错误“ 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();
        }
    });
});

详细信息：我只使用经度和纬度，并且我不使用任何Google地图，因为我只需要位置数据。

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]); 

概念证明

代码段：

 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>