在Google Maps API v3中,您可以通过以下步骤将侦听器添加到多个标记,以在单击标记时显示方向:
route()
方法来计算并绘制两个地点之间的路线。您可以指定路线的选项,例如交通模式(驾车、步行、公共交通等)和避免的道路类型(高速公路、收费道路等)。以下是一个示例代码,演示如何将侦听器添加到多个标记并显示方向:
// 创建地图对象
var map = new qq.maps.Map(document.getElementById("map"), {
center: new qq.maps.LatLng(37.7749, -122.4194), // 设置地图中心点
zoom: 12, // 设置地图缩放级别
});
// 创建标记数组
var markers = [
{
position: new qq.maps.LatLng(37.7749, -122.4194),
title: "标记1",
id: 1,
},
{
position: new qq.maps.LatLng(37.7833, -122.4167),
title: "标记2",
id: 2,
},
// 添加更多标记...
];
// 遍历标记数组并添加点击事件侦听器
markers.forEach(function (marker) {
var qqMarker = new qq.maps.Marker({
position: marker.position,
map: map,
title: marker.title,
});
// 添加点击事件侦听器
qq.maps.event.addListener(qqMarker, "click", function () {
showDirection(marker.id);
});
});
// 显示方向的函数
function showDirection(markerId) {
// 获取起始地点和目的地的坐标
var startLatLng = new qq.maps.LatLng(37.7749, -122.4194); // 起始地点坐标
var endLatLng;
// 根据标记的id获取目的地坐标
markers.forEach(function (marker) {
if (marker.id === markerId) {
endLatLng = marker.position;
}
});
// 创建Directions Service对象
var directionsService = new qq.maps.DirectionsService();
// 创建Directions Renderer对象,用于绘制路线
var directionsDisplay = new qq.maps.DirectionsRenderer({
map: map,
});
// 创建路线请求
var request = {
origin: startLatLng,
destination: endLatLng,
travelMode: qq.maps.TravelMode.DRIVING, // 设置交通模式为驾车
};
// 发送路线请求
directionsService.route(request, function (result, status) {
if (status === qq.maps.DirectionsStatus.OK) {
// 绘制路线
directionsDisplay.setDirections(result);
}
});
}
请注意,上述示例代码中使用的是腾讯云地图 JavaScript API,您可以根据需要替换为其他云计算服务商的地图 API。
领取专属 10元无门槛券
手把手带您无忧上云