Google Maps с отображением маршрута - PullRequest
Новая
       3

Google Maps с отображением маршрута

6 голосов
/ 25 марта 2011

в соответствии с Google Maps я могу спланировать маршрут, который пересекает несколько точек.Это объясняется здесь: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes

Теперь API хочет, чтобы я добавил путевые точки следующим образом: 

location: waypoints

, поэтому путевые точки - это массив, который я должен назначить параметру location:Я видел в демоверсии, что они заполняют массив строками.Что мне было интересно, если можно было передать широту и долготу вместо строк?

update: это та часть, где я пытаюсь создать маршрут.я поместил одно и то же значение в местоположение во всем цикле на данный момент, но id не работает, если я использую значения переменных либо 

function calcRoute() {

    var waypts = [];

    for (var i in owt.stores.spotStore.data.map) {
        waypts.push({
            location:  new google.maps.LatLng(12.3, -33.6),
            stopover:true
        });
        console.log(waypts);
    }
    var request = {
        origin: new google.maps.LatLng(50.82788, 3.26499),
        destination: new google.maps.LatLng(50.82788, 3.26499),
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}
;

Ответы [ 3 ]

10 голосов
/ 25 марта 2011

Согласно справочнику API :

Точка DirectionsWay представляет местоположение между пунктом отправления и пунктом назначения, через который следует направить поездку.

location LatLng | string Расположение точки маршрута. Может быть адресной строкой или LatLng.Необязательно

Таким образом, создание новой путевой точки со значением lat-long должно быть таким, как показано ниже 

return {
    location:new google.maps.LatLng(12.3, -33.6),
    stopover:true
};
2 голосов
/ 25 марта 2011

Согласно документации Google, путевой точкой может быть либо строка, либо объект LatLng.http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint

Вот пример использования LatLng 

    <!DOCTYPE html>
<html>
    <head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(-40.321, 175.54);
        var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: chicago
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        calcRoute();
    }

    function calcRoute() {

        var waypts = [];


stop = new google.maps.LatLng(-39.419, 175.57)
        waypts.push({
            location:stop,
            stopover:true});


        start  = new google.maps.LatLng(-40.321, 175.54);
        end = new google.maps.LatLng(-38.942, 175.76);
        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var route = response.routes[0];

            }
        });
    }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:70%;height:80%;">
        </div>
        <br />
        <div>

        </div>
    </body>
</html>
2 голосов
/ 25 марта 2011

Путевые точки могут быть либо строками, либо латунными.

http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions

В частности:

путевые точки [] (необязательно) задаетмассив DirectionsWaypoints.Путевые точки изменяют маршрут, направляя его через указанные места.Путевая точка указывается как литерал объекта с полями, показанными ниже: 

location specifies the location of the waypoint, either as a LatLng or as

a Строка, которая будет геокодирована.Остановка - это логическое значение, которое указывает, что путевая точка является остановкой на маршруте, что приводит к разделению маршрута на два маршрута.

(Для получения дополнительной информации о путевых точках см. Использование путевых точек в маршрутах ниже.)

РЕДАКТИРОВАТЬ

Ваши промежуточные точки недопустимы для маршрутизации, т. Е. Находятся в воде - попробуйте центрировать карту на (12, -33.6).

Вот пример использования путевых точек (не самый красивый код, но это пример;)). 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">

        var myRouter = {
            map_: null,
            directionsHelper_: null,

            stores: [
                    {name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)},
                    {name: "store2", location: new google.maps.LatLng(51.02788, 3.9)}
                ],

            calcRoute: function() {

                var waypts = [];

                for (var i in this.stores) {
                    waypts.push({
                        location: this.stores[i].location,
                        stopover:true
                    });
                }
                var request = {
                    origin: new google.maps.LatLng(50.82788, 3.26499),
                    destination: "Antwerp",
                    waypoints: waypts,
                    optimizeWaypoints: true,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

                var _SELF = this;
                this.directionsHelper_.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        _SELF.directionsDisplay_.setDirections(response);
                        return;
                    }
                    console.log('Directions Status: ' + status);
                });
            },

            init: function(mapid) {

                this.directionsHelper_ = new google.maps.DirectionsService();
                this.directionsDisplay_ = new google.maps.DirectionsRenderer();

                var center = new google.maps.LatLng(50.82788, 3.26499);
                var myOptions = {
                    zoom:7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: center
                }
                this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions);
                this.directionsDisplay_.setMap(this.map_);

                this.calcRoute();
            }
        };

        $(document).ready(function() {
            myRouter.init('map');
        });

    </script>
    <style type="text/css">
        #map {
            height: 500px;
            width: 600px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...