Mit Markern arbeiten

Entwickler im Europäischen Wirtschaftsraum (EWR)

Erstellen Sie Markierungen für Routenwegpunkte, indem Sie createWaypointAdvancedMarkers() aufrufen. Standardmäßig werden mit createWaypointAdvancedMarkers() Markierungen für die Route mit den Labels „A“, „B“, „C“ usw. für jeden Wegpunkt erstellt. Sie können die Markierungen weiter anpassen, indem Sie Optionen übergeben, um den Markierungsstil basierend auf dem Markierungsindex oder den Eigenschaften des entsprechenden RouteLeg-Elements zu ändern.

Vollständigen Quellcode des Beispiels ansehen

Das folgende Codebeispiel zeigt, wie benutzerdefinierte Markierungen für Routen-Wegpunkte erstellt werden.

TypeScript

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

  innerMap = await mapElement.innerMap;
  innerMap.setOptions({
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Call the function after the map is loaded.
  google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    getDirections();
  });
}

async function getDirections() {
  //@ts-ignore
  // Request the needed libraries.
  const [{ Route }, { PinElement }] = await Promise.all([
    google.maps.importLibrary('routes'),
    google.maps.importLibrary('marker'),
  ]);

  // Define routes request with an intermediate stop.
  const request = {
    origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
    destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
    intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
    travelMode: 'DRIVING',
    fields: ['path', 'legs', 'viewport'],
  };

  // Call computeRoutes to get the directions.
  const result = await Route.computeRoutes(request);
  if (!result.routes || result.routes.length === 0) {
    console.warn("No routes found");
    return;
  }

  // Alter style based on marker index.
  function markerOptionsMaker(
    defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'green',
          borderColor: 'green',
        }).element
      }
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'red',
          borderColor: 'red',
        }).element
      }
    }

    return { ...defaultOptions, map: innerMap };
  }

  const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);


  // Fit the map to the route.
  innerMap.fitBounds(result.routes[0].viewport);
  innerMap.setHeading(270);

  // Create polylines and add them to the map.
  mapPolylines = result.routes[0].createPolylines();
  mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}

initMap();
index.ts

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);
    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };
    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn("No routes found");
        return;
    }
    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);
    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}
initMap();
index.js

CSS

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

<html>
  <head>
    <title>Get directions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    <!-- 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

Testbeispiel

Standardmarkierungen hinzufügen

Wenn Sie Markierungen mit dem Standardstil hinzufügen möchten, rufen Sie createWaypointAdvancedMarkers() auf und übergeben Sie eine Markierungsoption, um die aktuelle Karte anzugeben, wie im folgenden Code-Snippet gezeigt. 

// Create markers using default style.
const markers = await result.routes[0].createWaypointAdvancedMarkers({ map: innerMap });

Markierungen mit benutzerdefiniertem Stil hinzufügen

Wenn Sie Markierungen mit einem benutzerdefinierten Stil hinzufügen möchten, rufen Sie createWaypointAdvancedMarkers() auf und übergeben Sie Markierungsoptionen, die benutzerdefinierte Stileigenschaften enthalten. Wenn Sie Stile auf diese Weise anwenden, werden alle Markierungen gleich formatiert. Das folgende Code-Snippet zeigt, wie Sie Markierungen mit einem benutzerdefinierten Stil erstellen. 

// Create markers with a custom style.
const markerOptions = {
  map: innerMap,
  content: new PinElement({
    scale: 1.5,
    background: '#8C0DD1',
    borderColor: '#6D0AA5',
    glyphColor: '#6D0AA5',
  }).element
}

const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptions);

Benutzerdefinierten Stil auf einzelne Markierungen anwenden

Wenn Sie einen benutzerdefinierten Stil auf einzelne Markierungen anwenden möchten, übergeben Sie eine Funktion an createWaypointAdvancedMarkers(), um die Stiloptionen für Markierungen basierend auf dem Markierungsindex oder den RouteLeg-Eigenschaften festzulegen. Das folgende Code-Snippet zeigt eine Funktion zum Erstellen von Markierungen und zum Formatieren von Markierungen basierend auf dem Markierungsindex:

TypeScript

// Alter style based on marker index.
function markerOptionsMaker(
  defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
  //@ts-ignore
  waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
) {
  const { index, totalMarkers, leg } = waypointMarkerDetails;

  // Style the origin waypoint.
  if (index === 0) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'green',
        borderColor: 'green',
      }).element
    }
  }

  // Style all intermediate waypoints.
  if (!(index === 0 || index === totalMarkers - 1)) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'blue',
        borderColor: 'blue',
      }).element
    }
  }

  // Style the destination waypoint.
  if (index === totalMarkers - 1) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'red',
        borderColor: 'red',
      }).element
    }
  }

  return { ...defaultOptions, map: innerMap };
}

const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
index.ts

JavaScript

// Alter style based on marker index.
function markerOptionsMaker(defaultOptions, 
//@ts-ignore
waypointMarkerDetails) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;
    // Style the origin waypoint.
    if (index === 0) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'green',
                borderColor: 'green',
            }).element
        };
    }
    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'blue',
                borderColor: 'blue',
            }).element
        };
    }
    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'red',
                borderColor: 'red',
            }).element
        };
    }
    return { ...defaultOptions, map: innerMap };
}
const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
index.js

Vollständiges Codebeispiel ansehen

TypeScript

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

  innerMap = await mapElement.innerMap;
  innerMap.setOptions({
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Call the function after the map is loaded.
  google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    getDirections();
  });
}

async function getDirections() {
  //@ts-ignore
  // Request the needed libraries.
  const [{ Route }, { PinElement }] = await Promise.all([
    google.maps.importLibrary('routes'),
    google.maps.importLibrary('marker'),
  ]);

  // Define routes request with an intermediate stop.
  const request = {
    origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
    destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
    intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
    travelMode: 'DRIVING',
    fields: ['path', 'legs', 'viewport'],
  };

  // Call computeRoutes to get the directions.
  const result = await Route.computeRoutes(request);
  if (!result.routes || result.routes.length === 0) {
    console.warn("No routes found");
    return;
  }

  // Alter style based on marker index.
  function markerOptionsMaker(
    defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'green',
          borderColor: 'green',
        }).element
      }
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'red',
          borderColor: 'red',
        }).element
      }
    }

    return { ...defaultOptions, map: innerMap };
  }

  const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);


  // Fit the map to the route.
  innerMap.fitBounds(result.routes[0].viewport);
  innerMap.setHeading(270);

  // Create polylines and add them to the map.
  mapPolylines = result.routes[0].createPolylines();
  mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}

initMap();
index.ts

JavaScript

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);
    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };
    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn("No routes found");
        return;
    }
    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);
    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}
initMap();
index.js

CSS

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

<html>
  <head>
    <title>Get directions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map>
    <!-- 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

Testbeispiel