我在指定两点之间的路线时遇到了问题。所以 问题如下我有一个固定点的初始和几个地方有描述和按钮路由,当我按下地图上的路由按钮出现在从起点到所需位置的路线旁边。 我希望你能帮助我。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<button onclick="">Route to point one</button>
<button oclick="">Route to point two</button>
<div id="map">Route</div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(50.66956513913178,17.922616861760616),
});
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.66956513913178,17.922616861760616),
map: map
});
var endmarker = new google.maps.Marker({
position: new google.maps.LatLng(50.66956513913178,17.922616861760616),
map: map
});
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
endmarker.addEventListener('click', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: new google.maps.LatLng(50.66956513913178,17.922616861760625),
destination: document.getElementById('end').value,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分:0)
要添加按钮点击功能以路由到各个点,一个选项是修改calculateAndDisplayRoute
以将第二个点作为参数。
function calculateAndDisplayRoute(point) {
directionsService.route({
origin: new google.maps.LatLng(50.66956513913178, 17.922616861760625),
destination: point,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
在全局范围内定义点(以及方向服务/渲染器):
var directionsService;
var directionsDisplay;
var point1 = {lat: 50.669552,lng: 17.914806};
var point2 = {lat: 50.669151, lng: 17.932956};
HTML:
<button onclick="calculateAndDisplayRoute(point1);">Route to point one</button>
<button onclick="calculateAndDisplayRoute(point2);">Route to point two</button>
代码段
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
<button onclick="calculateAndDisplayRoute(point1);">Route to point one</button>
<button onclick="calculateAndDisplayRoute(point2);">Route to point two</button>
<div id="map">Route</div>
<script>
var directionsService;
var directionsDisplay;
var point1 = {
lat: 50.669552,
lng: 17.914806
};
var point2 = {
lat: 50.669151,
lng: 17.932956
};
function initMap() {
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(50.66956513913178, 17.922616861760616),
});
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.66956513913178, 17.922616861760616),
map: map
});
var endmarker = new google.maps.Marker({
position: new google.maps.LatLng(50.66956513913178, 17.922616861760616),
map: map
});
}
function calculateAndDisplayRoute(point) {
directionsService.route({
origin: new google.maps.LatLng(50.66956513913178, 17.922616861760625),
destination: point,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>