使用标记

欧洲经济区 (EEA) 开发者

通过调用 createWaypointAdvancedMarkers() 为路线航点创建标记。 默认情况下，createWaypointAdvancedMarkers() 会为每个途经点创建标记，并为路线添加“A”“B”“C”等标签。您还可以通过传入选项来进一步自定义标记，以根据标记索引或相应 RouteLeg 的属性更改标记样式。

查看完整的示例源代码

以下代码示例展示了如何为路线途经点创建自定义标记。

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

试用示例

添加默认标记

如需使用默认样式添加标记，请调用 createWaypointAdvancedMarkers() 并传递标记选项以指定当前地图，如以下代码段所示。 

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

添加具有自定义样式的标记

如需使用自定义样式添加标记，请调用 createWaypointAdvancedMarkers() 并传递包含自定义样式属性的标记选项。当您以这种方式应用样式时，所有标记都会采用相同的样式。以下代码段展示了如何创建具有自定义样式的标记。 

// 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);

将自定义样式应用于各个标记

如需为各个标记应用自定义样式，请将函数传递给 createWaypointAdvancedMarkers()，以根据标记索引或 RouteLeg 属性设置标记样式选项。 以下代码段展示了一个用于创建标记并根据标记指数设置其样式的函数：

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

查看完整的代码示例

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

试用示例