Я разрабатываю поле поиска для приложения, в котором пользователь вводит адрес или название учреждения, а система динамически возвращает данные. Я использовал API Матрицы расстояний Google Maps для выполнения расчетов, но параметр «происхождение» не принимает значение переданный геолокации HTML, который возвращает
{«rows»: [{«elements»: [{«status»: «ZERO_RESULTS»}]}], «originAddresses»: [«nan, nan»], «destinationAddresses»: [«- 25.494926, -49.294444999999996»] }
‘Адрес назначения’, который я вручную установил для проверки.
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, потому что мне нужны только данные о местоположении.
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>
Других решений пока нет …