Laravel Google Map：如何在地图上展示多条路线？

当然可以实现！在Laravel里集成Google Maps同时展示多条路线其实并不复杂，我来一步步给你拆解具体做法：

1. 先搞定Google Maps API的基础配置 #

首先你得确保你的Google Cloud账号已经启用了 Maps JavaScript API 和 Directions API，并且拿到了有效的API密钥——这俩是路线展示的核心服务，没启用的话会直接报错。

2. 在Laravel后端准备路线数据 #

你可以在控制器里把需要展示的多条路线的起点、终点数据整理好，传递给前端视图。比如：

// 示例控制器方法
public function displayMultiRoutes()
{
    // 这里可以从数据库读取，或者手动定义多条路线
    $routes = [
        ['origin' => '北京市东城区天安门广场', 'destination' => '北京市东城区故宫博物院'],
        ['origin' => '上海市黄浦区外滩', 'destination' => '上海市浦东新区东方明珠'],
        ['origin' => '广州市天河区广州塔', 'destination' => '广州市越秀区北京路步行街']
    ];

    return view('multi-routes-map', compact('routes'));
}

3. 前端渲染地图与多条路线 #

这部分是关键：每条路线都需要一个独立的DirectionsRenderer实例（如果复用同一个，后面的路线会覆盖前面的），然后通过DirectionsService请求路线数据并渲染到地图上。

在你的Blade视图里写以下代码：

<!-- 地图容器，设置好宽高 -->
<div id="multi-route-map" style="height: 700px; width: 100%;"></div>

<script>
    // 从Laravel后端获取路线数据，转成JS可用的格式
    const routesData = @json($routes);

    function initMap() {
        // 初始化地图，设置默认中心点（可以根据你的路线调整）
        const map = new google.maps.Map(document.getElementById('multi-route-map'), {
            zoom: 10,
            center: { lat: 39.9042, lng: 116.4074 } // 默认北京坐标
        });

        // 创建路线服务实例，用于向Google请求路线规划
        const directionsService = new google.maps.DirectionsService();

        // 遍历每条路线，逐个渲染
        routesData.forEach((route, index) => {
            // 为每条路线创建独立的渲染器
            const directionsRenderer = new google.maps.DirectionsRenderer({
                map: map,
                // 给不同路线设置不同颜色，方便区分
                polylineOptions: {
                    strokeColor: ['#FF3333', '#33FF33', '#3333FF', '#FF9900'][index % 4],
                    strokeWeight: 6,
                    strokeOpacity: 0.8
                }
            });

            // 发起路线请求
            directionsService.route({
                origin: route.origin, // 起点可以是地址字符串，也可以是经纬度对象{lat: xxx, lng: xxx}
                destination: route.destination, // 终点同理
                travelMode: google.maps.TravelMode.DRIVING // 可选：DRIVING（驾车）、WALKING（步行）、TRANSIT（公共交通）
            }, (response, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    // 请求成功，渲染路线
                    directionsRenderer.setDirections(response);
                } else {
                    console.error(`第${index+1}条路线加载失败：${status}`);
                }
            });
        });
    }
</script>

<!-- 加载Google Maps JS API，替换成你的API密钥 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>

一些实用的注意事项 #

• 每条路线必须用独立的DirectionsRenderer：这是多条路线同时展示的核心，共用一个的话只会显示最后一条路线。
• 自定义路线样式：通过polylineOptions可以设置颜色、粗细、透明度，让不同路线一目了然。
• 支持经纬度/地址两种格式：不管是传递具体的经纬度对象，还是地址字符串，Google Maps API都能识别。
• 检查API权限：如果出现路线加载失败，先去Google Cloud控制台确认Directions API和Maps JavaScript API已经启用，并且API密钥没有被限制。

这样操作下来，你就能在同一个Google Map上同时展示多条不同的路线啦！

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