Question

我在teagarden的网站上工作，我想制作一个谷歌地图，让客户可以将他们的地址输入文本字段。

当他们提交地址时，谷歌地图将提供输入的地址和teagarden的地址之间的导航路线（如果导航路线显示在网站本身的谷歌地图或它打开谷歌，这无关紧要带有导航的地图选项卡。只要人们可以输入他们的地址，它就会让他们向teagarden导航。

这可能吗？

Answer 1

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

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

我在这里写了关于如何使用这个api的解释（How to use Address instead of Lat/Long in Google Map 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
};

在start和endpoint之间自动绘制polyLine线的功能可能如下所示：

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

如果您需要进一步帮助完成此任务，请不要犹豫。

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

1 个答案: