查询路线

// Initialize and add the map. let map; let mapPolylines: google.maps.Polyline[] = []; const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function initMap(): Promise<void> {  // Request the needed libraries.  const [{Map}, {Place}, {Route}] = await Promise.all([  google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,  google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,  //@ts-ignore  google.maps.importLibrary('routes') as Promise<google.maps.Routes>  ]);  map = new Map(document.getElementById("map") as HTMLElement, {  zoom: 12,  center: center,  mapTypeControl: false,  mapId: 'DEMO_MAP_ID',  });  // Use address strings in a directions request.  const requestWithAddressStrings = {  origin: '1600 Amphitheatre Parkway, Mountain View, CA',  destination: '345 Spear Street, San Francisco, CA',  fields: ['path'],  };  // Use Place IDs in a directions request.  const originPlaceInstance = new Place({  id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA  });  const destinationPlaceInstance = new Place({  id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA  });  const requestWithPlaceIds = {  origin: originPlaceInstance,  destination: destinationPlaceInstance,  fields: ['path'], // Request fields needed to draw polylines.  };   // Use lat/lng in a directions request.  // Mountain View, CA  const originLatLng = {lat: 37.422000, lng: -122.084058};  // San Francisco, CA  const destinationLatLng = {lat: 37.774929, lng: -122.419415};  // Define a computeRoutes request.  const requestWithLatLngs = {  origin: originLatLng,  destination: destinationLatLng,  fields: ['path'],  };  // Use Plus Codes in a directions request.  const requestWithPlusCodes = {  origin: '849VCWC8+R9', // Mountain View, CA  destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA  fields: ['path'],  };  // Define a routes request.  const request = {  origin: 'Mountain View, CA',  destination: 'San Francisco, CA',  travelMode: 'DRIVING',  fields: ['path'], // Request fields needed to draw polylines.  };  // Call computeRoutes to get the directions.  const {routes, fallbackInfo, geocodingResults} = 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));  // Create markers to start and end points.  const markers = await routes[0].createWaypointAdvancedMarkers();  // Add markers to the map  markers.forEach((marker) => marker.setMap(map));  // Display the raw JSON for the result in the console.  console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);  // Fit the map to the path.  fitMapToPath(routes[0].path!); } // 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();
index.ts

// Initialize and add the map. let map; let mapPolylines = []; const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function initMap() {  // Request the needed libraries.  const [{ Map }, { Place }, { Route }] = await Promise.all([  google.maps.importLibrary('maps'),  google.maps.importLibrary('places'),  //@ts-ignore  google.maps.importLibrary('routes')  ]);  map = new Map(document.getElementById("map"), {  zoom: 12,  center: center,  mapTypeControl: false,  mapId: 'DEMO_MAP_ID',  });  // Use address strings in a directions request.  const requestWithAddressStrings = {  origin: '1600 Amphitheatre Parkway, Mountain View, CA',  destination: '345 Spear Street, San Francisco, CA',  fields: ['path'],  };  // Use Place IDs in a directions request.  const originPlaceInstance = new Place({  id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA  });  const destinationPlaceInstance = new Place({  id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA  });  const requestWithPlaceIds = {  origin: originPlaceInstance,  destination: destinationPlaceInstance,  fields: ['path'], // Request fields needed to draw polylines.  };  // Use lat/lng in a directions request.  // Mountain View, CA  const originLatLng = { lat: 37.422000, lng: -122.084058 };  // San Francisco, CA  const destinationLatLng = { lat: 37.774929, lng: -122.419415 };  // Define a computeRoutes request.  const requestWithLatLngs = {  origin: originLatLng,  destination: destinationLatLng,  fields: ['path'],  };  // Use Plus Codes in a directions request.  const requestWithPlusCodes = {  origin: '849VCWC8+R9', // Mountain View, CA  destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA  fields: ['path'],  };  // Define a routes request.  const request = {  origin: 'Mountain View, CA',  destination: 'San Francisco, CA',  travelMode: 'DRIVING',  fields: ['path'], // Request fields needed to draw polylines.  };  // Call computeRoutes to get the directions.  const { routes, fallbackInfo, geocodingResults } = 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));  // Create markers to start and end points.  const markers = await routes[0].createWaypointAdvancedMarkers();  // Add markers to the map  markers.forEach((marker) => marker.setMap(map));  // Display the raw JSON for the result in the console.  console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);  // Fit the map to the path.  fitMapToPath(routes[0].path); } // Helper function to fit the map to the path. async function fitMapToPath(path) {  const { LatLngBounds } = await google.maps.importLibrary('core');  const bounds = new LatLngBounds();  path.forEach((point) => {  bounds.extend(point);  });  map.fitBounds(bounds); } initMap();
index.js

/*  * 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.css

<html> <head> <title>Get directions</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script> </body> </html>
index.html