Проложить маршрут к маркеру Google Maps

Я пытаюсь проложить маршрут к позиции маркера Google Maps по почтовому индексу, который пользователь может ввести в текстовое поле. Я использую библиотеки Google Maps, Places и Directions.

Я нашел этот пример в Google и пытаюсь использовать его http://code.google.com/apis/maps/documentation/directions/

Я думаю, что я в значительной степени там. Я хочу, чтобы пользователь мог щелкнуть маркер на карте, а затем щелкнуть ссылку с надписью «Направления от первого маркера». Я могу заставить это отображаться правильно, и я передаю правильное местоположение в функцию, но по какой-то причине она не сохраняет все координаты широты. Похоже, он сбрасывает один из них и поэтому выдает ошибку. Если я распечатаю то, что я передаю новой функции (placeLoc), она покажет только одну из координат.

ошибка, которую он дает: Uncaught Error: Invalid value for property: -0.5796900000000278

Вот код, который у меня есть до сих пор:

        function addPlaceResults(){

    var request = {
        location: midWayPoint,
        radius: 7000,
        types: [type]
    };

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
    service.getDetails(request, callback);


    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            }
        }   
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        var request = { reference: place.reference };
        service.getDetails(request, function(details, status) {

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(
                    details.name + "<br />" 
                    + details.formatted_address + "<br />" 
                    + "<a target='_blank' href='" + details.website +"'>Visit Website</a>" + "<br />" 
                    + details.formatted_phone_number + "<br />"
                    + "<a href='#' onclick='dPoint1(" +placeLoc+ ")'>Directions from Marker One</a>" + "<br />"

                );
             infowindow.open(map, this);
            });
        });
    }
};

        //directions from point one
        function dPoint1(x) {
    console.log(x);
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        suppressInfoWindows: true
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    var request = {
        origin: address1, 
        destination: x,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

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

Я попытался включить в этот вопрос только соответствующий код и детали. Если есть что-то, что я пропустил или что-то неясно, пожалуйста, дайте мне знать, и я добавлю это / сделаю все возможное, чтобы прояснить себя.

Еще раз, я буду очень признателен за любую помощь.

Ура Дж.А.


Изменить

Хорошо, это имеет смысл. Спасибо, парни.

Я пытался использовать метод toString(), но это не сработало. Я могу успешно передать строку с двумя значениями, разделенными запятой, в функцию dPoint1, используя toUrlValue(). Когда я это делаю, я могу вывести их обоих на консоль, используя console.log(x,y), но на самом деле я не могу запустить код. Я получаю ту же ошибку, что и раньше.

Я думаю, проблема в том, что мне нужно, чтобы они были чем-то одним, поэтому я могу добавить его к «пункту назначения:», например, в конечном итоге он должен быть пунктом назначения: x, но поскольку мне нужно передать x и y, я должен иметь пункт назначения: x ,y, что выдает ошибку.

Я предполагаю, что мне нужно использовать метод google.maps.LatLng().

Я добавил это в конце прошлой ночи:

newlatlng = new google.maps.LatLng((placeLoc.lat()+placeLoc.lat()));

это дало мне некоторые направления, но не в нужное место!

Есть ли у кого-нибудь идеи о том, как я могу это использовать?

Большое спасибо за всю помощь, которую вы мне оказали.

JA


person Jim    schedule 05.03.2012    source источник
comment
Используйте запятую, чтобы получить два аргумента для LatLng (для которого нужны два числа, я удивлен, что он работал только с одним!): newlatlng = new google.maps.LatLng(placeLoc.lat(),placeLoc.lat());   -  person Andrew Leach    schedule 06.03.2012
comment
Не уверен, опечатка или нет, но попробуйте второе значение как placeLoc.lng() newlatlng = new google.maps.LatLng(placeLoc.lat(),placeLoc.lng());   -  person Chris Green    schedule 07.03.2012
comment
Спасибо за помощь, ребята! Я, наконец, разобрался прошлой ночью. Новый код выглядит примерно так: + "<a href='#' onclick='dPoint1(" +details.geometry.location.toUrlvalue()+ ")'>Directions from Marker One</a>" затем я изменил dPoint1, чтобы он принимал x и y, затем я создал var newlatlng = new google.maps.LatLng(x, y); в верхней части функции dPoint1 и использовал newlatlng в качестве источника. Спасибо, что остаетесь со мной! JA   -  person Jim    schedule 07.03.2012


Ответы (2)


это не сработает

onclick='dPoint1(" +placeLoc+ ")'

потому что вы не можете передавать объекты таким функциям: объединение их в виде строки приведет к строковому представлению, которое, вероятно, будет в форме «x, y». Вам нужно определить функцию dPoint1 для получения x и y, что вполне может сработать, но было бы лучше явно передавать литеральные значения, полученные из placeLoc.

person Andrew Leach    schedule 05.03.2012

Как упомянул Andrew Leach:

onclick='dPoint1(" +placeLoc+ ")'

Не работает, поскольку place.geometry.location является объектом google.maps.LatLng: http://code.google.com/apis/maps/documentation/javascript/reference.html#PlaceGeometry

Однако класс google.maps.LatLng имеет метод toString(): http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLng

Вы можете попробовать использовать это вместо передачи объекта google.maps.LatLng методу dPoint1().

E.g.

onclick='dPoint1(" +placeLoc.toString()+ ")' 
person Chris Green    schedule 06.03.2012
comment
Это то, что я сказал. onclick='dPoint1(" +placeLoc+ ")' использует метод .toString(), а существующая функция dPoint1() принимает только один аргумент. Изменение функции для приема двух аргументов, вероятно, сработает; но это не очень легко поддерживать, потому что не очевидно, что placeLoc превращается в два числа, разделенных запятыми. Это действительно должно быть сделано явно, чтобы упростить задачу в будущем (а также для защиты от изменений в формате .toString() в будущем). - person Andrew Leach; 06.03.2012