获取Google地图标记的路线

时间:2012-03-05 22:32:52

标签: javascript google-maps-api-3 google-places-api google-direction

我正在尝试从用户可以在文本框中输入的邮政编码获取Google Maps Marker位置的路线。我正在使用地图,地点和方向Google图书馆。

我从谷歌找到了这个例子,我正在努力解决这个问题 http://code.google.com/apis/maps/documentation/directions/

我想我差不多了。我希望用户能够点击地图上的标记,然后点击“Marker One的路线”链接。我可以让它正确显示并将正确的位置传递给函数但由于某种原因它不会保留整个latlng坐标。看起来它会丢掉其中一个,这就是它抛出错误的原因。如果我打印出我传递给新函数(placeLoc)的内容,它只显示其中一个坐标。

它给出的错误是: 未捕获错误:属性值无效:-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);
        }
    });
};

我试图在此问题中仅包含相关代码和详细信息。如果有任何我错过的或任何不清楚的事情请告诉我,我会将其添加/尽我所能来澄清自己。

再一次,我将非常感谢任何帮助。

干杯JA


修改

好的,这很有道理。多谢你们。

我尝试过使用toString()方法,但这不起作用。我可以通过使用toUrlValue()成功传递带有两个值的字符串,用逗号分隔成dPoint1函数。当我这样做时,我可以使用console.log(x,y)将它们打印到控制台,但我实际上无法运行代码。我得到了和以前一样的错误。

我认为问题是因为我需要将它们作为一件事,所以我可以将它添加到'目的地:'例如它最终应该是目的地:x,但因为我需要传递x&amp;我需要有目的地:x,y,它会引发错误。

我猜我需要使用google.maps.LatLng()方法。

我在昨晚深夜补充说:

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

给了我一些指示,但没有到正确的地方!

有没有人对如何使用它有任何想法?

非常感谢你迄今给我的所有帮助。

JA

2 个答案:

答案 0 :(得分:1)

这不起作用

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

因为你不能将对象传递给这样的函数:将它作为字符串连接将产生一个字符串表示形式,其形式可能是“x,y”。你需要定义函数dPoint1来获取x和y - 这可能很有用 - 但最好传递明确的文字值,你从placeLoc派生。

答案 1 :(得分:0)

Andrew Leach所述:

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

无法工作,因为place.geometry.locationgoogle.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()+ ")'