Javascript 从具有多个航路点的API地图创建google地图链接

我已经构建了一个web应用程序，它使用GoogleMapsV3API构建一个包含多个航路点的地图

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

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

---

感谢您的帮助。

我发现了这一点，实际上比我想象的要容易，但需要一些努力

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

URL就是地址，城市，州，邮政编码/航路点地址，城市，州，邮政编码/航路点/结束地址，城市，州，邮政编码。如果您使用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 + "/";
}

而dirLink将是一个完整的链接，它将提供从开始到结束的所有航路点的方向。Address。

不要忘记 手稿：

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

函数initMap（）{
var pointA=new google.maps.LatLng（51.7519，-1.2578），
pointB=新的google.maps.LatLng（51.509865，-0.118092），
pointC=new google.maps.LatLng（50.8429，-0.1313），
myOptions={
缩放：7，
中心：波因塔
},
map=new google.maps.map（document.getElementById（'map-canvas'），myOptions），
//实例化一个方向服务。
directionsService=新的google.maps.directionsService，
directionsDisplay=新建google.maps.DirectionsRenderer({
地图：地图
}),
markerA=new google.maps.Marker({
位置：pointA，
标题：“A点”，
标签：“A”，
地图：地图
}),
markerB=新的google.maps.Marker({
位置：B点，
标题：“B点”，
标签：“B”，
地图：地图
}),
markerC=new google.maps.Marker({
位置：pointC，
标题：“C点”，
标签：“C”，
地图：地图
});
//找到从A到B的路线
计算显示路线（方向服务、方向显示、点A、点B、点C）；
}
函数calculateAndDisplayRoute（方向服务、方向显示、点A、点B、点C）{
var first=new google.maps.LatLng（51.509865，-0.118092）；//我们可以从params获取它们。
var请求={
产地：波因塔，
目的地：pointC，
航路点：[{位置：第一，中途站：false}
]，//此处为航路点数组
航路点：对，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（“方向面板”）；
summaryPanel.innerHTML=“”；
//对于每个管线，显示摘要信息。
对于（var i=0；i”；
summaryPanel.innerHTML+=route.legs[i]。起始地址+“to”；
summaryPanel.innerHTML+=route.legs[i]。结束地址+“
”；
summaryPanel.innerHTML+=route.legs[i].distance.text+“

”；
}
}否则{
警报（“方向响应”+状态）；
}
});     
}
initMap（）；

上述代码正是这样做的。它获取航路点并创建指示显示，并在地图上绘制方向。但这些文档并没有回答我提出的问题：如何创建一个指向谷歌地图的可点击链接，上面有这些航路点和路线。正如在maps.google.com链接中一样，该链接可以发送给用户所有的航路点和方向。创建带有方向的“谷歌地图”的唯一有文档记录的方法是通过嵌入API。不是好斗，而是你不理解这个问题。我正在使用GoogleMapsV3API在我的网站上创建地图。我网站上的地图上有所有的航路点和路线。这不是问题所在。问题是：是否有可能创建一个链接，允许用户在maps.google.com上获取相同的地图和航路点。我知道的唯一有文档记录的方法是使用嵌入API。有一些帖子详细介绍了如何使用“旧”谷歌地图界面实现这一点，这些可能暂时可以使用，但没有文档记录，因此可能会在某个时候停止使用。

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