如何结合Google Maps API与地理定位实现加载时显示导航路线

核心思路 #

页面加载完成后，先通过浏览器navigator.geolocation.getCurrentPosition获取当前位置坐标，拿到起点坐标后，再初始化Google Maps，并调用路线服务计算从当前位置到指定目的地的导航路线。

完整合并代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps 导航</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=routes"></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 预设目的地坐标（示例：纽约中央公园）
        const destination = { lat: 40.7829, lng: -73.9654 };
        let map;
        let directionsService;
        let directionsRenderer;

        // 页面加载后启动流程
        window.onload = function() {
            // 初始化路线服务和渲染器
            directionsService = new google.maps.DirectionsService();
            directionsRenderer = new google.maps.DirectionsRenderer();

            // 调用地理定位获取当前位置
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        // 成功获取当前坐标
                        const currentLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };
                        // 初始化地图并绘制路线
                        initMap(currentLocation);
                        calculateRoute(currentLocation, destination);
                    },
                    (error) => {
                        // 定位失败处理
                        console.error('定位失败:', error);
                        alert('无法获取当前位置，请检查定位权限设置');
                        // 可选：定位失败时用默认位置初始化地图
                        initMap({ lat: 39.9042, lng: 116.4074 }); // 示例：北京
                    }
                );
            } else {
                alert('你的浏览器不支持地理定位功能');
            }
        };

        // 初始化地图
        function initMap(center) {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: center
            });
            // 将路线渲染器绑定到地图
            directionsRenderer.setMap(map);
        }

        // 计算并绘制导航路线
        function calculateRoute(origin, destination) {
            directionsService.route({
                origin: origin,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING // 可选：DRIVING/WALKING/TRANSIT/BICYCLING
            }, (response, status) => {
                if (status === 'OK') {
                    directionsRenderer.setDirections(response);
                } else {
                    console.error('路线计算失败:', status);
                    alert('无法计算导航路线，请稍后重试');
                }
            });
        }
    </script>
</body>
</html>

关键整合点说明 #

• 顺序控制：必须等地理定位成功拿到坐标后，再初始化地图和计算路线，避免因坐标未就绪导致的错误
• 服务初始化：提前创建DirectionsService和DirectionsRenderer，避免重复实例化
• 错误处理：添加定位失败、路线计算失败的提示，提升用户体验
• 权限提示：本地运行时浏览器会请求定位权限，需允许才能正常获取当前位置

注意事项 #

• 替换代码中的你的API密钥为有效的Google Maps API密钥，确保已启用「Directions API」和「Maps JavaScript API」
• 演示环境（如在线编辑器）可能因非HTTPS环境限制无法获取定位，但本地VSCode通过Live Server等工具运行的HTTPS/HTTP环境可正常使用
• 可根据需求修改travelMode参数切换出行方式

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