[英]Google Maps - Drawing the route without the markers
I am drawing a route for two points using Google Maps API but I have some inconvenient from this drawing.我正在使用 Google Maps API 绘制两点的路线,但我从这张图中有些不便。 When I draw the route, Google it shows me on map two points, A and B, the origin and destination point.
当我绘制路线时,谷歌会在地图上显示两个点 A 和 B,即起点和终点。
The problem is that I can't take it out.问题是我拿不出来。 I need to show only the route without this markers.
我只需要显示没有这个标记的路线。
Have someone known how to show only the route?有人知道如何只显示路线吗?
The code is based on example from developers guide https://plnkr.co/edit/UWfKc7XGHtdbeRZkUS8X?p=preview该代码基于开发人员指南中的示例https://plnkr.co/edit/UWfKc7XGHtdbeRZkUS8X?p=preview
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service (complex)</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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var startLatLng;
var endLatLng;
var startAddr = 'Grand Central Station';
var endAddr = 'City Hall';
function initMap() {
// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 40.771, lng: -73.974}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
calculateAndDisplayRoute(directionsDisplay, directionsService);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService) {
// Retrieve the start and end locations and create a DirectionsRequest using DRIVING directions.
directionsService.route({
origin: startAddr,
destination: endAddr,
travelMode: 'DRIVING'
}, function(response, status) {
// Route the directions and pass the response to a function to create markers for each step.
if (status === 'OK') {
directionsDisplay.setDirections(response);
console.log(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCgkOZvjHinGyRsQT7WO1R7KGmtxJJfDPE&callback=initMap">
</script>
</body>
</html>
I found the solution:我找到了解决方案:
directionsDisplay.setOptions({suppressMarkers: true});
And here the link to the documentation where all the options are explained这里是解释所有选项的文档的链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.