3 votos

CloudMade Routing con Leaflet: no se muestra la ruta

Estoy intentando consumir el API de enrutamiento de CloudMade utilizando el Folleto.

Hasta ahora, he conseguido pasar puntos y recibir una respuesta, y parsear esa respuesta en un array de puntos. La matriz de puntos se pasa a un objeto polilínea, que se añade al mapa.

Me he encontrado con un problema en el que la polilínea no se muestra en el mapa. He intentado probar si los puntos se leen correctamente, empujados a la matriz de puntos y al objeto de línea y no ha habido problemas hasta ahora.

Este es el aspecto del resultado: Output of the code to display routes

Este es mi código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Routing Using Cloudmade Routing and Leaflet</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A map to demonstrate routing using CloudMade routing and Leaflet">
        <meta name="author" content="">

        <link rel="stylesheet" href="../leaflet/dist/leaflet.css" />
    </head>
    <body>
        <div id="map" style="width: 600px; height: 600px;"></div>
        <!--import scripts-->
        <!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
        <script src="../leaflet/dist/leaflet.js" type='text/javascript'></script>
        <!-- end import scripts-->
        <!--code-->
        <script type="text/javascript">
            var map, fromMarker, toMarker;

            function addScript(url) {
                var script = document.createElement('script');
                script.type="text/javascript";
                script.src=url;
                document.getElementsByTagName('head') [0].appendChild(script);
            }

            function getRoute(response) {
                var point, route, points = [];
                for (var i=0; i<response.route_geometry.length; i++)
                {
                    point = new L.Point(response.route_geometry[i][0] , response.route_geometry[i][1]);
                    points.push(point);
                }
                route= new L.Polyline(points, {
                    weight: 3,
                    opacity: 0.5,
                    smoothFactor: 1
                }).addTo(map);
                route.bringToFront();
            }

            map=L.map('map').setView([13.00077, 77.57218], 15);
            var basemap = L.tileLayer('http://{s}.tile.cloudmade.com/0e0491f21622495da28cf15c92bf9419/1/256/{z}/{x}/{y}.png',
            {
                maxZoom:18
            }).addTo(map);

            fromMarker = new L.Marker(new L.latLng([12.999070,77.568679])).addTo(map);
            toMarker=new L.Marker(new L.latLng([13.006610,77.578130])).addTo(map);
            addScript('http://routes.cloudmade.com/0e0491f21622495da28cf15c92bf9419/api/0.3/' + fromMarker.getLatLng().lat + ',' + fromMarker.getLatLng().lng + ',' + toMarker.getLatLng().lat + ',' + toMarker.getLatLng().lng + '/car.js?callback=getRoute');
        </script>
        <!--end code-->
    </body>

</html>

Si alguien pudiera ayudarme, le estaría muy agradecido.

2voto

anonon Puntos 21

En lugar de L.Point debe utilizar L.LatLng

Su función de ruta get debe ser algo como esto .

function getRoute(response) {
                var point, route, points = [];
                for (var i=0; i<response.route_geometry.length; i++)
                {
                    point = new L.LatLng(response.route_geometry[i][0] , response.route_geometry[i][1]);
                    points.push(point);
                }
                route= new L.Polyline(points, {
                    weight: 3,
                    opacity: 0.5,
                    smoothFactor: 1
                }).addTo(map);
                route.bringToFront();
            }

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X