获取前往 Google 地图标记的路线

Question

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

我从谷歌找到了这个例子，我正在尝试使用它 http://code.google.com/apis/maps/documentation/directions/

我想我已经差不多了。我希望用户能够单击地图上的标记，然后单击显示“来自标记一的路线”的链接。我可以让它正确显示，并将正确的位置传递给函数，但由于某种原因，它不能保留整个 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 和 y，所以我必须有目的地：x，y，这会引发错误。

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

我昨晚加了这个：

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

这给了我一些方向，但不是正确的地方！

有人对我如何使用它有任何想法吗？

非常感谢您迄今为止给我的所有帮助。

JA

Answer 1

这行不通

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

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

Answer 2

正如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() 方法。

例如

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