如何在Google自定义地图中显示A到B的全部可行路线？

嘿，我来帮你解决这个问题！Google Maps自带的自定义地图（也就是My Maps）确实默认只能显示一条最优路线，但要展示从A到B的所有可行路线，咱们得借助Google Maps JavaScript API来实现——因为My Maps是面向普通用户的简化工具，没有开放这个高级功能。下面是具体的操作步骤，跟着来就行：

1. 先准备好API密钥 #

首先你得有一个有效的Google Maps JavaScript API密钥，这个可以在Google Cloud控制台里创建，记得要启用Maps JavaScript API和Directions API（这俩是获取路线数据的核心服务）。

2. 搭建基础的HTML页面框架 #

先写一个简单的页面，用来承载地图：

<!DOCTYPE html>
<html>
<head>
    <title>A到B所有路线展示</title>
    <!-- 替换成你自己的API密钥 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap" async defer></script>
    <style>
        #map {
            height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

把代码里的你的API密钥换成你在Google Cloud拿到的密钥就行。

3. 编写JavaScript逻辑获取并渲染所有路线 #

这部分是核心，我们用DirectionsService请求所有备选路线，再用DirectionsRenderer把每条路线都画在地图上：

let map;
let directionsService;
// 用来存储每条路线的渲染器，方便后续管理
let directionsRenderers = [];

function initMap() {
    // 初始化地图，中心点可以设为起点A附近的经纬度
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 你的A点纬度, lng: 你的A点经度}
    });

    directionsService = new google.maps.DirectionsService();

    // 定义起点A和终点B，可以是具体地址，也可以是经纬度对象
    const origin = "A点的具体地址或经纬度"; // 比如"北京市朝阳区XX路"或者{lat: 39.9042, lng: 116.4074}
    const destination = "B点的具体地址或经纬度"; // 比如"北京市海淀区XX大厦"或者{lat: 39.9889, lng: 116.3058}

    // 发起路线请求，关键参数看这里！
    directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING, // 可以换成WALKING（步行）、TRANSIT（公共交通）等
        provideRouteAlternatives: true // 必须设为true，才会返回所有可行路线，而不只是最优的那条
    }, (response, status) => {
        if (status === 'OK') {
            // 遍历每条返回的路线，给每条路线分配不同的颜色，方便区分
            response.routes.forEach((route, index) => {
                const renderer = new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    routeIndex: index,
                    polylineOptions: {
                        strokeColor: getRandomColor(),
                        strokeWeight: 5 // 路线的粗细，数值越大越粗
                    }
                });
                directionsRenderers.push(renderer);
            });
        } else {
            window.alert('获取路线失败啦，原因是: ' + status);
        }
    });
}

// 辅助函数：生成随机颜色，让每条路线看起来不一样
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

几个关键注意点 #

• provideRouteAlternatives: true是核心：这个参数如果不设为true，DirectionsService只会返回Google认为最优的那一条路线，所以一定要记得加上！
• 路线颜色区分：通过getRandomColor()函数给每条路线生成不同的颜色，这样用户能一眼区分开不同的路径。
• 关于Google My Maps：如果你本来是想在My Maps里直接展示多条路线，那很遗憾，My Maps目前没有这个功能，只能通过上面这种API开发的自定义页面来实现。

内容的提问来源于stack exchange，提问作者Jonny