本指南将向您介绍如何迁移到 Route 类的新渲染方法。
在 Directions 服务(旧版)中,渲染方法是 DirectionsRenderer
类的一部分。路线类(Beta 版)提供了两种新的渲染方法:createPolylines
和 createWaypointAdvancedMarkers
。
旧版 DirectionsRenderer
在 Directions 服务(旧版)中,渲染方法是 DirectionsRenderer
类的一部分。DirectionsRenderer
类负责显示多段线、任何关联标记以及路段的文本显示;它具有以下方法:
setDirections()
- 呈现提供的路线响应。setMap()
- 设置用于呈现路线响应的地图。setPanel()
- 在面板中以一系列文本步骤的形式显示路线。
以下示例展示了如何使用 DirectionsRenderer
类在地图上渲染路线。
function initMap() { var directionsService = new google.maps.DirectionsService(); var directionsRenderer = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, center: chicago } var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Set the map on the directions renderer. directionsRenderer.setMap(map); // Set the panel to display the directions as a series of textual steps. directionsRenderer.setPanel(document.getElementById('directionsPanel')); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin: start, destination: end, travelMode: 'DRIVING' }; // Call the directions service to get the directions. directionsService.route(request, function(response, status) { if (status == 'OK') { // Render the polyline and markers on the map. directionsRenderer.setDirections(response); } }); }
Route
类(Beta 版)
路线类(Beta 版)提供以下新的渲染方法,这些方法取代了旧版 DirectionsRenderer
类方法:
createPolylines
createWaypointAdvancedMarkers
Route
类没有与旧版 DirectionsRenderer
类中的 setPanel()
方法等效的方法。如需显示文本步骤,您必须手动创建 HTML 元素并将其插入 DOM 中。以下示例展示了如何使用 Route 类在地图上呈现路线,以及如何手动创建 HTML 元素来显示文本形式的路线。
let map; let mapPolylines = []; let markers = []; let center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function initMap() { // Request the needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const { Route } = await google.maps.importLibrary('routes') as google.maps.Routes; map = new Map(document.getElementById("map"), { zoom: 12, center, mapTypeControl: false, mapId: 'DEMO_MAP_ID', }); // Define a simple directions request. const request = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', fields: ['legs'], }; // Call computeRoutes to get the directions. const { routes } = await Route.computeRoutes(request); // Use createPolylines to create polylines for the route. mapPolylines = routes[0].createPolylines(); // Add polylines to the map. mapPolylines.forEach((polyline) => polyline.setMap(map)); fitMapToPath(routes[0].path); // Add markers to start and end points. const markers = await routes[0].createWaypointAdvancedMarkers({map}); // Render navigation instructions. const directionsPanel = document.getElementById("directions-panel"); if (!routes || routes.length === 0) { if (directionsPanel) { directionsPanel.textContent = "No routes available."; } } const route = routes[0]; if (!route.legs || route.legs.length === 0) { if (directionsPanel) { directionsPanel.textContent = "The route has no legs."; } return; } const fragment = document.createDocumentFragment(); route.legs.forEach((leg, index) => { const legContainer = document.createElement("div"); legContainer.className = "directions-leg"; legContainer.setAttribute("aria-label", `Leg ${index + 1}`); // Leg Title const legTitleElement = document.createElement("h3"); legTitleElement.textContent = `Leg ${index + 1} of ${route.legs.length}`; legContainer.appendChild(legTitleElement); if (leg.steps && leg.steps.length > 0) { // Add steps to an ordered list const stepsList = document.createElement("ol"); stepsList.className = "directions-steps"; leg.steps.forEach((step, stepIndex) => { const stepItem = document.createElement("li"); stepItem.className = "direction-step"; stepItem.setAttribute("aria-label", `Step ${stepIndex + 1}`); // Maneuver if (step.maneuver) { const maneuverNode = document.createElement("p"); maneuverNode.textContent = step.maneuver; maneuverNode.className = "maneuver"; stepItem.appendChild(maneuverNode); } // Distance and Duration if (step.localizedValues) { const distanceNode = document.createElement("p"); distanceNode.textContent = `${step.localizedValues.distance} (${step.localizedValues.staticDuration})`; distanceNode.className = "distance"; stepItem.appendChild(distanceNode); } // Instructions if (step.instructions) { const instructionsNode = document.createElement("p"); instructionsNode.textContent = step.instructions; instructionsNode.className = "instruction"; stepItem.appendChild(instructionsNode); } stepsList.appendChild(stepItem); }); legContainer.appendChild(stepsList); } fragment.appendChild(legContainer); directionsPanel?.appendChild(fragment); }); } // Helper function to fit the map to the path. async function fitMapToPath(path) { const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary; const bounds = new LatLngBounds(); path.forEach((point) => { bounds.extend(point); }); map.fitBounds(bounds); } initMap();