如何通过KML标记信息窗或双击标记调用DirectionsService规划路线？

没问题，这就教你怎么给你的Google地图脚本加上路线规划功能，满足双击标记或点击infoWindow链接触发路线的需求。下面是分步实现方案：

1. 先初始化路线服务和渲染器 #

首先你需要创建Google Maps的DirectionsService（用来请求路线数据）和DirectionsRenderer（用来在地图上渲染路线）实例，把它们绑定到你的地图上：

// 初始化路线服务与渲染器
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
// 将渲染器关联到你的地图实例（这里的map是你已创建的Google Map对象）
directionsRenderer.setMap(map);

2. 编写路线规划的核心函数 #

这个函数会以用户当前位置为起点，选中的标记位置为终点，发起路线请求并处理结果：

// 全局变量存储用户当前位置，记得在获取位置时赋值
let userLocation = null;

function calculateRoute(endLocation) {
    // 先检查是否成功获取了用户位置
    if (!userLocation) {
        alert("无法获取你的当前位置，请开启位置权限后重试");
        return;
    }

    // 构造路线请求参数
    const directionsRequest = {
        origin: new google.maps.LatLng(userLocation.lat, userLocation.lng),
        destination: endLocation,
        travelMode: google.maps.TravelMode.DRIVING, // 可按需改为WALKING/TRANSIT/BICYCLING
    };

    // 发起路线请求
    directionsService.route(directionsRequest, (response, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
            // 成功获取路线，渲染到地图上
            directionsRenderer.setDirections(response);
        } else {
            alert(`路线规划失败：${status}`);
        }
    });
}

3. 给标记添加双击触发事件 #

在你创建KML标记的循环里，给每个标记绑定dblclick事件，双击时调用路线函数：

// 假设这是你遍历KML地标创建标记的代码片段
placemarks.forEach(placemark => {
    const marker = new google.maps.Marker({
        position: placemark.position,
        map: map,
        title: placemark.name
    });

    // 添加双击事件：双击标记触发路线规划
    marker.addListener('dblclick', () => {
        calculateRoute(marker.getPosition());
    });

    // ... 原有infoWindow相关代码
});

4. 在InfoWindow中添加路线触发按钮 #

修改InfoWindow的内容，加入一个按钮，点击后同样触发路线规划：

// 在创建InfoWindow的地方修改内容
const infoWindow = new google.maps.InfoWindow();
marker.addListener('click', () => {
    // 动态生成带路线按钮的InfoWindow内容
    const content = `
        <h3>${placemark.name}</h3>
        <p>${placemark.description}</p>
        <button style="margin-top:8px; padding:4px 8px;" 
                onclick="calculateRoute(new google.maps.LatLng(${placemark.position.lat()}, ${placemark.position.lng()}))">
            规划到这里的路线
        </button>
    `;
    infoWindow.setContent(content);
    infoWindow.open(map, marker);
});

5. 确保用户位置被正确存储 #

别忘了在获取用户当前位置的代码里，把坐标赋值给userLocation变量：

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(position => {
    userLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
    };
    // 可选：给当前位置添加一个特殊标记（比如蓝色点）
    new google.maps.Marker({
        position: userLocation,
        map: map,
        title: "你的当前位置",
        icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });
}, error => {
    alert(`获取位置失败：${error.message}`);
});

额外提示 #

• 如果需要清除已渲染的路线，可以添加一个按钮，点击时调用directionsRenderer.setMap(null)；
• 你可以根据需求调整travelMode参数，切换不同的出行方式；
• 注意处理位置权限拒绝的情况，避免后续功能报错。

内容的提问来源于stack exchange，提问作者S.E.