使用Google Maps JS API在网页上使用用户位置来计算路线的按钮,可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
确保将YOUR_API_KEY
替换为你在步骤1中获取的API密钥。
<button onclick="calculateRoute()">计算路线</button>
calculateRoute()
函数来处理计算路线的逻辑。可以使用以下代码:function calculateRoute() {
// 获取用户位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// 创建地图
var map = new google.maps.Map(document.getElementById('map'), {
center: userLocation,
zoom: 14
});
// 创建起点标记
var startMarker = new google.maps.Marker({
position: userLocation,
map: map,
title: '起点'
});
// 创建终点标记
var endLocation = { lat: 37.7749, lng: -122.4194 }; // 替换为你的终点位置
var endMarker = new google.maps.Marker({
position: endLocation,
map: map,
title: '终点'
});
// 创建路线
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
var request = {
origin: userLocation,
destination: endLocation,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
}
});
});
} else {
alert('浏览器不支持地理定位');
}
}
在上述代码中,你需要将endLocation
变量替换为你的终点位置的经纬度。
<div>
元素。可以使用以下代码:<div id="map"></div>
通过以上步骤,你就可以在网页上使用Google Maps JS API来计算用户位置到指定终点位置的路线了。记得替换代码中的API密钥和终点位置。
领取专属 10元无门槛券
手把手带您无忧上云