Google maps 谷歌地图API导航起始点通过输入文本字段

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

当他们提交地址时，谷歌地图将给出输入地址和茶园地址之间的导航路线（导航路线是否显示在网站上的谷歌地图上，或者是否打开带有导航的谷歌地图选项卡，都无关紧要。只要人们可以输入地址，并向茶园提供导航）

这可能吗？

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

将地址转换为可用坐标：

我在这里写了一篇关于如何使用这个api的解释（）

要计算路线，请查看：

您将使用上述地理定位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);
    });

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

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);
    });

路由：函数（请求）{
控制台。登录（“登录路线”）；
var lineColor=“#a12347”；
var lineOpacity=1.0；
var-strokeWeight=5；
var service=new google.maps.DirectionsService（）；
var bounds=new google.maps.LatLngBounds（）；
polyRoute=新的google.maps.Polyline({
路径：[]，
strokeColor:lineColor，
strokeOpacity:lineOpacity，
冲程重量：冲程重量
});
服务路由（请求、功能（结果、状态）{
if（status==google.maps.directionstatus.OK）{
控制台日志（结果）；
var legs=result.routes[0]。legs；
对于（i=0；i

---

如果你在这项任务中需要进一步的帮助，请毫不犹豫地询问。

因此，如果我是正确的，第一个链接是代码，这样它可以自动定位你并将其作为起点。第二个链接将其更改为lat/long，第三个链接使用用户的lat/long和网站的原始lat/long在它们之间进行路由。是的，这就是好的，谢谢你的帮助。如果我有更多的问题，我会在这里再次评论：3