迁移到高级标记

自 2024 年 2 月 21 日 (v3.56) 起，google.maps.Marker 已弃用。我们建议您改用新的 google.maps.marker.AdvancedMarkerElement 类。与旧版 google.maps.Marker 类相比，高级标记有了很大改进。

详细了解此弃用

若要将旧版标记更新为高级标记，请执行以下步骤：

  1. 添加用于导入标记库的代码。请注意，之前的标记版本 (google.maps.Marker) 没有此要求。
  2. 将 google.maps.Marker 更改为 google.maps.marker.AdvancedMarkerElement
  3. 在地图初始化代码中添加地图 ID，例如 mapId: 'DEMO_MAP_ID'。如果您还没有地图 ID，也可以使用“DEMO_MAP_ID”。

添加高级标记库

您用于加载库的方法取决于您的网页加载 Maps JavaScript API 的方式。

  • 如果您的网页使用动态脚本加载，请在运行时添加标记库并导入 AdvancedMarkerElement（以及可选的 PinElement），如此处所示。

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • 如果您的网页使用旧版的直接脚本加载标记，请将 libraries=marker 添加到加载脚本，如以下代码段所示。

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

详细了解如何加载 Maps JavaScript API

示例

以下代码示例显示了添加旧版标记的代码，随后是使用高级标记的同一示例的代码：

迁移前

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

迁移后

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

探索高级标记的功能

高级标记可通过以前无法实现的方式进行自定义。现在，您可以调整标记的大小（比例），更改背景、边框和字形的颜色。自定义图形图像的操作更加简单，现在，您还可以使用 HTML 和 CSS 来编写自定义标记。不妨详细了解高级标记的所有功能：