谷歌地图API是一组JavaScript库,允许开发者在网页中嵌入谷歌地图并实现各种地图相关功能。方向服务(Directions Service)是其中的一个重要组件,用于计算两点或多点之间的路线。
// 初始化地图
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 39.9042, lng: 116.4074 }, // 北京坐标
});
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
// 计算并显示路线
calculateAndDisplayRoute(directionsService, directionsRenderer);
}
// 计算并显示路线
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService.route(
{
origin: { lat: 39.9042, lng: 116.4074 }, // 起点:北京
destination: { lat: 31.2304, lng: 121.4737 }, // 终点:上海
travelMode: google.maps.TravelMode.DRIVING, // 驾车模式
},
(response, status) => {
if (status === "OK") {
directionsRenderer.setDirections(response);
} else {
window.alert("路线请求失败: " + status);
}
}
);
}
原因:通常是由于API密钥无效或未正确加载库
解决方案:
// 确保正确加载API
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
原因:起点和终点之间没有可行路线
解决方案:
原因:容器元素尺寸问题或CSS冲突
解决方案:
#map {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
原因:频繁调用API或复杂路线计算
解决方案:
function calculateMultiLegRoute() {
const waypts = [
{ location: { lat: 34.0522, lng: -118.2437 }, stopover: true }, // 洛杉矶
{ location: { lat: 41.8781, lng: -87.6298 }, stopover: true } // 芝加哥
];
directionsService.route({
origin: { lat: 40.7128, lng: -74.0060 }, // 纽约
destination: { lat: 37.7749, lng: -122.4194 }, // 旧金山
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, callback);
}
directionsRenderer.setOptions({
polylineOptions: {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3
},
suppressMarkers: true // 隐藏默认标记
});
通过合理使用谷歌地图API和方向服务,可以为用户提供强大的位置服务和路线规划功能。
没有搜到相关的文章