已知几个地点,点击第一个点则出现一条路线,出现并连接第二个地点,以此类推,写一段代码
时间: 2024-04-16 10:27:00 浏览: 75
已知一个点的坐标和两点之间距离求另外一点坐标
好的,以下是一个示例代码,可以在地图上点击多个点,并连接它们显示路线:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击地点显示路线</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>点击地点显示路线</h1>
<div id="map"></div>
<script>
var map;
var markers = []; // 存储已点击的地点标记
var directionsService;
var directionsDisplay;
function initMap() {
// 创建地图对象
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.7128, lng: -74.0060 }, // 设置地图初始中心
zoom: 12 // 设置地图初始缩放级别
});
// 创建路线相关的服务和显示对象
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
// 添加点击事件监听器
map.addListener('click', function (event) {
addMarker(event.latLng); // 添加地点标记
calculateAndDisplayRoute(); // 计算并显示路线
});
}
// 添加地点标记
function addMarker(latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
markers.push(marker);
}
// 计算并显示路线
function calculateAndDisplayRoute() {
if (markers.length >= 2) {
var origin = markers[0].getPosition();
var destination = markers[markers.length - 1].getPosition();
var waypoints = [];
for (var i = 1; i < markers.length - 1; i++) {
waypoints.push({
location: markers[i].getPosition(),
stopover: true
});
}
var request = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('无法计算路线,请重试。');
}
});
}
}
</script>
<!-- 引入 Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
```
请注意,上述代码中的 `YOUR_API_KEY` 需要替换为您自己的 Google Maps API 密钥。此代码会在地图上添加点击事件监听器,当用户点击地图时,会在该位置添加一个地点标记,并计算并显示连接所有地点的驾车路线。
希望这个示例能满足您的需求!如果您使用的是其他地图服务或路线规划API,请相应地调整代码。
阅读全文