Google Maps API, ошибка “не Access-Control-Allow-Origin”

У меня есть список заказов, где у каждого заказа есть адрес, я, что я хочу, дело в том, что он сказал мне лучший порядок поставки как адрес заказов. Для этого я использую API Google Maps, который возвращает в array положения. Но выполнив это, он бросает мне ошибку:

Не 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8084' is therefore not allowed access.

listaPedidos.js

$(document).load(obtenerUbicacion());

var posActualLat = 0;
var posActualLng = 0;

var waypoints = [];
var cont = 0;

// OBTENER LA POSICIÓN DEL REPARTIDOR.
function obtenerUbicacion(){

    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(objPosition)
        {   
            posActualLat = objPosition.coords.latitude;
            posActualLng = objPosition.coords.longitude;

            ordenLista();
        }, function(objPositionError)
        {
            switch (objPositionError.code)
            {
                case objPositionError.PERMISSION_DENIED:
                    alert("No se ha permitido el acceso a la posición del usuario.");
                break;
                case objPositionError.POSITION_UNAVAILABLE:
                    alert("No se ha podido acceder a la información de su posición.");
                break;
                case objPositionError.TIMEOUT:
                    alert("El servicio ha tardado demasiado tiempo en responder.");
                break;
                default:
                    alert("Error desconocido.");
            }
        }, {
                maximumAge: 75000,
                timeout: 15000
        });
    }
    else
    {
        alert("Su navegador no soporta la geolocalización.");
    }
}

// Funcion transformadora
function translateWaypoints(waypoints, optimizar) {
    var params = [];
    if (optimizar === true) {
        params.push('optimize:true');
    }
    $.each(waypoints, function(idx, waypoint){
        params.push(waypoint.dir);
    });
    return params.join('|');
}

function ordenLista(){

    if (waypoints.length === 0){
        var div = document.getElementById("listado");
        div.innerHTML = "<h2 class='noHay'>No tienes pedidos asignados</h2>";
    }
    else{
        $.ajax({
            url:"https://maps.googleapis.com/maps/api/directions/json",
            dataType:"json",
            data:{
                key:'MI_KEY',
                origin: posActualLat + ',' + posActualLng,
                destination: -34.911946 + ',' + -56.160502,
                waypoints:translateWaypoints(waypoints, true),
                callback:"?"
            },
            success: armarListado
        });
    }
}

function armarListado(info){
    var orden = info.routes[0].waypoint_order;

    var div = document.getElementById("listado");
    var i = 0;
    var temp = "";
    while(i < waypoints.length){    
        temp += "<div id='"+waypoints[orden[i]].id+"' class='listaPedidos'>";
        temp += "<a href='DetallesServlet?id="+waypoints[orden[i]].id+"'>";
        temp += "<p>#"+waypoints[orden[i]].id+"</p>";
        temp += "<p>"+waypoints[orden[i]].desc+"</p>";
        temp += "<p>"+waypoints[orden[i]].dir+"</p>";
        temp += "<p>"+waypoints[orden[i]].coment+"</p>";
        temp += "</a></div>";

        div.innerHTML = temp;
        i++;
    }
}
1
задан 13.01.2017, 15:34
0 ответов

Не возможно использовать ajax с этой API google maps, потому что он дает тебе проблему CORS. Я это решил таким образом:

в HTML я поместил: <script src="https://maps.googleapis.com/maps/api/js?key=LA_KEY"></script>

в javascript:

function ordenLista(){

if (waypoints.length === 0){
    var div = document.getElementById("listado");
    div.innerHTML = "<h2 class='noHay'>No tienes pedidos asignados</h2>";
}
else{
    translateWaypoints();
    var directionsService = new google.maps.DirectionsService();
    directionsService.route({
        origin: posActualLat + ',' + posActualLng,
        destination: -34.377281 + ',' + -55.237778,
        waypoints: params,
        optimizeWaypoints: true,
        travelMode: "DRIVING"
    },
    function (response, status) {
        if (status === google.maps.DirectionsStatus.OK){
            armarListado(response);
        }
        else{
            alert("Error al mostrar los pedidos");
        }
    });
}
}
1
ответ дан 03.12.2019, 17:41

Теги

Похожие вопросы