我有一个使用 Google Maps JS API 的 typescript Angular 14 库。 在这个应用程序中可以 我想禁用交通详细信息(绿色路径上的所有白色气球)。 有办法吗?
这里是从下面示例的第 24 行开始的代码
directionsService
.route({
origin: { lat: 37.77, lng: -122.447 },
destination: { lat: 37.768, lng: -122.511 },
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode],
})
.then((response) => {
directionsRenderer.setDirections(response);
})
.catch((e) => window.alert("Directions request failed due to " + status));
这是来自 Google 的示例 https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/directions-travel-modes/jsfiddle
您可以通过从
DirectionsResult
对象解码折线并创建 Polyline
对象来手动渲染交通方向,以直观地表示路线的实际路径。
我使用了
Geometry 库中的
decodePath()
函数将编码的折线解码为 LatLng 对象数组。
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: {
lat: 37.77,
lng: -122.490
},
});
const directionsService = new google.maps.DirectionsService();
const origin = {
lat: 37.77,
lng: -122.447
};
const destination = {
lat: 37.768,
lng: -122.511
};
const request = {
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.TRANSIT
};
//console.log(request)
directionsService.route(request, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
const route = result.routes[0];
// Decode the encoded polyline
const path = google.maps.geometry.encoding.decodePath(route.overview_polyline);
// Create polyline to visually display the route from point A to B
const pathPolyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
//Adding marker for origin and destination
const originMarker = new google.maps.Marker({
position: origin,
map: map,
title: 'Origin'
})
const destinationMarker = new google.maps.Marker({
position: destination,
map: map,
title: 'Destination'
})
pathPolyline.setMap(map);
}
});
}
window.initMap = initMap;
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Travel Modes in Directions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>