如何在动态加载多个Google Maps库后创建地图与标记？

你可以通过解构Promise.all返回的两个库对象，分别获取需要的类来创建地图和标记，以下是完整的TypeScript示例：

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;

// 并行加载maps和marker库，提升加载效率
const [mapsLibrary, markerLibrary] = await Promise.all([
  google.maps.importLibrary("maps") as google.maps.MapsLibrary,
  google.maps.importLibrary("marker") as google.maps.MarkerLibrary,
]);

// 从maps库中取出Map类，初始化地图
const { Map } = mapsLibrary;
map = new Map(document.getElementById("map") as HTMLElement, {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

// 从marker库中取出AdvancedMarkerElement类，创建标记并绑定到地图
const { AdvancedMarkerElement } = markerLibrary;
marker = new AdvancedMarkerElement({
  map: map,
  position: { lat: -34.397, lng: 150.644 },
  title: "自定义标记",
});

关键说明： #

• Promise.all会并行发起两个库的加载请求，比依次加载更快
• 每个importLibrary调用返回对应库的对象，通过类型断言as xxxLibrary可以获得TypeScript的类型提示
• 从库对象中解构出需要的类（比如Map、AdvancedMarkerElement），用法和单个库加载时完全一致

如果是使用纯JavaScript，只需去掉类型声明和断言即可：

let map;
let marker;

const [mapsLibrary, markerLibrary] = await Promise.all([
  google.maps.importLibrary("maps"),
  google.maps.importLibrary("marker"),
]);

const { Map } = mapsLibrary;
map = new Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

const { AdvancedMarkerElement } = markerLibrary;
marker = new AdvancedMarkerElement({
  map: map,
  position: { lat: -34.397, lng: 150.644 },
  title: "自定义标记",
});

内容的提问来源于stack exchange，提问作者chuckd