迁移到高级标记

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

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

  1. 添加用于导入标记库的代码（请参阅以下步骤）。
  2. 将 google.maps.Marker 更改为 google.maps.marker.AdvancedMarkerElement；如果您的 import 语句声明了 AdvancedMarker，则可以省略限定路径。
  3. 在地图初始化代码中添加地图 ID，例如，如果您还没有地图 ID，可以出于测试目的使用 mapId: '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',
});

迁移后

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

探索高级标记的功能

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