通过输入文本字段的 Google Maps API 导航起点

Question

我正在开发一个茶园网站，我想制作一个谷歌地图，让客户能够将他们的地址输入到文本字段中。

当他们提交地址时，谷歌地图将给出输入地址和茶园地址之间的导航路线（导航路线是否显示在网站本身的谷歌地图中或打开谷歌带有导航的地图选项卡。只要人们可以输入他们的地址，它就会为他们提供前往茶园的导航）。

这可能吗？

Answer 1

当然。 这是一项非常简单的任务，让用户停留在同一页面而不是打开新选项卡不会有问题。您应该查看以下 API：

将地址转换为可用坐标： https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

我已经在此处（How to use Address instead of Lat/Long in Google Map API）写了有关如何使用此 api 的说明

并计算路线看看：https://developers.google.com/maps/documentation/directions/intro

您将使用上述 Geolocation api 获得坐标。您需要一个具有已知来源和目的地的请求对象，如下所示：

var request = {
 origin: {lat: startLat, lng: startLng},
 destination: {lat: endLat, lng: endLng},
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};

在起点和终点之间自动绘制折线的函数如下所示：

route: function (request) {           
    console.log("in route");
    var lineColor = "#a12347";
    var lineOpacity = 1.0;
    var strokeWeight = 5;

    var service = new google.maps.DirectionsService();
    var bounds = new google.maps.LatLngBounds();

    polyRoute = new google.maps.Polyline({
        path: [],
        strokeColor: lineColor,
        strokeOpacity: lineOpacity,
        strokeWeight: strokeWeight
    });

    service.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            console.log(result);
            var legs = result.routes[0].legs;
            for (i = 0; i < legs.length; i++) {
                var steps = legs[i].steps;
                for (j = 0; j < steps.length; j++) {
                    var nextSegment = steps[j].path;
                    for (k = 0; k < nextSegment.length; k++) {
                        polyRoute.getPath().push(nextSegment[k]);
                        bounds.extend(nextSegment[k]);
                    }
                }
            }
        }
        map.fitBounds(bounds);
        map.setZoom(16);
        polyRoute.setMap(map);
    });

如果您需要此任务的进一步帮助，请随时提出。