从具有多个航点的 API 地图创建谷歌地图链接答案

【问题标题】：Create a google maps link from API Map with multiple waypoint从具有多个航点的 API 地图创建谷歌地图链接
【发布时间】：2016-05-31 13:56:17
【问题描述】：

我已经构建了一个网络应用程序，该应用程序使用 google maps v3 API 来构建具有多个航点方向的地图。

 jQuery.getJSON(driverURL, function(dData){
       var routeObject = {};
       var lat = dData.Location.lat;
       var lng = dData.Location.lng;
       routeObject.origin = new google.maps.LatLng(lat, lng);
       routeObject.destination = new google.maps.LatLng(endRoute.lat, endRoute.lng);
       routeObject.waypoints = waypoints;
       routeObject.travelMode = google.maps.TravelMode.DRIVING;
       routeObject.optimizeWaypoints = true;
       directionsService.route(routeObject, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                 var directionsDisplay = new google.maps.DirectionsRenderer({
                       polylineOptions: {
                            strokeColor: colors[driverLines.length]
                       }
                 });
                 directionsDisplay.setMap(dMap);
                 directionsDisplay.setDirections(response);
            } else {
                 window.alert('Directions request failed due to ' + status);
            }
       });
  });

我已经存储了地图、航点、起点和终点，但我希望能够生成一个谷歌地图可点击链接，指向我可以发送给用户的这条路线的路线。我可以找到如何发送带有单个标记的链接，但不知道如何生成具有完整路线方向的地图链接。

任何帮助表示赞赏。

【问题讨论】：

developers.google.com/maps/documentation/embed/…
这正是上面的代码所做的。它采用航路点并创建方向显示并在地图上绘制方向。但是那些文档没有回答我提出的问题：如何创建一个可点击的链接到带有这些航点和路线的谷歌地图。就像在 maps.google.com 链接中一样，可以将所有航点和方向发送给用户。
创建带有方向的“谷歌地图”的唯一记录方法是通过嵌入 API。
不要好斗，但你不理解这个问题。我正在使用 google maps v3 API 在我的网站上创建地图。我网站上的地图上有所有的航点和路线。那不是问题。问题是：是否可以创建一个链接，允许用户在 maps.google.com 上获得相同的地图和航点。
我知道的唯一记录方法是使用嵌入 API。有帖子详细介绍了如何使用“旧”谷歌地图界面执行此操作，这些内容可能暂时可以使用，但没有记录，因此可能会在某个时候停止工作。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我想通了，实际上比我想象的要容易，但需要做一些工作。

首先，我将我拥有的一些航点作为地址，而不是纬度/经度点，并在 maps.google.com 上构建了路线图。然后我查看了该地图的 URL 是如何构建的。重新创建非常简单。

URL 只是http://maps.google.com/dir/starting 地址作为地址，城市，州，zip/航点作为地址，城市，州，zip/航点/结束地址作为地址，城市，州，zip 就完成了。如果您使用 lat/lng 坐标作为起点、航点、终点位置，您必须首先使用 V3 api 对其进行地理编码，然后从返回的结果中提取地址信息并将其插入您的 URL，但它可以工作.

以下是我制作最终链接的方法，该链接有一个起点、一堆航点和一个终点。我从一个名为 Data 的 JSON 对象开始，其中包含所有地址信息，并从中构建一个长字符串，格式为 Google Maps 期望的：

var dirs = ''
for(var x = 0; x<Data.length;x++){
    dirs += Data[x].Address + "," + Data[x].City + "," + Data[x].State + "," + Data[x].Zip + "/";
}

然后，我将开始和结束位置添加到它：

var dirLink = 'http://maps.google.com/maps/dir/';
dirLink += start.Address + "," + start.City + "," + start.State + "," + start.Zip + "/" + dirs + end.Address + "," + end.City + "," + end.State + "," + end.Zip;

而 dirLink 将是一个完整的链接，它将提供从 start.Address 到所有航点到 end.Address 的路线。

【讨论】：

【解决方案2】：

别忘了在脚本中：

function initMap() {
    var pointA = new google.maps.LatLng(51.7519, -1.2578),
        pointB = new google.maps.LatLng(51.509865, -0.118092),
        pointC = new google.maps.LatLng(50.8429, -0.1313),
        myOptions = {
            zoom: 7,
            center: pointA
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        // Instantiate a directions service.
        directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        }),
        markerC = new google.maps.Marker({
            position: pointC,
            title: "point C",
            label: "C",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, pointC);

}


function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB, pointC) {
    var first = new google.maps.LatLng(51.509865, -0.118092); //we can get them from params.
    var request = {
        origin: pointA,
        destination: pointC,
        waypoints: [{location: first, stopover: false}
          ], //here array of waypoints
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById("directions_panel");
            summaryPanel.innerHTML = "";
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
                var routeSegment = i + 1;
                summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
            }
        } else {
            alert("directions response " + status);
        }
    });     
}
initMap();

【讨论】：