在 Google Maps Javascript API v3 中操作标记

Question

我真的很难理解新的 Google Maps Javascript API 的结构。

在添加带有标记的地图的教程中，新结构想要

async

加载库，加载相关类：

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

好的，所以我将其包装在某种

async

方法中来初始化地图

const initMap = async () => {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // ...
}

没问题..但是如果我想要另一种方法来添加或操作标记，会发生什么？我要再打电话给

importLibrary

吗？

const addMarker = async (blah) => {
  // Will this hit some sort of local cache of types??
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // ...
}

我的意思是..这个东西是缓存的，还是每次都会尝试从互联网导入代码？为什么我必须加载

async

才能获取类定义？

浏览器中还没有顶级

await

，因此这些类的负载需要限定在

function

范围内，这意味着它们无法在该范围之外访问，就像......另一个函数一样。

人们是如何做到这一点的？这个 API 的整个结构对我来说似乎很疯狂。

我想做的是这样的：

// This won't work, but this is what I want to do:
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

class GoogleMap {

  constructor() {
    this._map;
    this._markers = [];
  }

  init(elem) {
    this._map = new Map(elem, {...});
  }

  addMarker(position) {
    this._markers.push(new AdvancedMarkerElement({
      this._map,
      position: position,
    }));
  }
}

以这种方式使用这个[疯狂] API 的最佳实践指南是什么？

Answer 1

不可否认，新的 Marker API 有点傻。

不过，动态加载脚本确实被缓存了。您可以通过检查“网络”选项卡并查找

https://maps.googleapis.com/maps-api-v3/api/js/.../marker.js

来验证这一点：

const { Map } = await google.maps.importLibrary("maps");
let AdvancedMarkerElement;
({ AdvancedMarkerElement } = await google.maps.importLibrary("marker"));

// some logic 

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

其次，通过调用

.importLibrary()

，您可以访问全局

google.maps

命名空间。调用

importLibrary("marker")

然后填充

google.maps.marker

库。这就是全部内容了。

一旦加载，这两个调用是等效的：

const m1 = new google.maps.marker.AdvancedMarkerElement(...);
const m2 = new AdvancedMarkerElement(...);

也就是说，您可以编写自己的实用程序来跳过

google.maps.marker

库的环绕以避免冗长的点路径...

这给我带来了一个官方实用程序包（

@googlemaps/adv-markers-utils

），它准备“简化使用高级标记的常见模式。”

有了它，您只需导入

marker

库一次（但它必须位于异步上下文中）：

async function main() {
  const {Map} = await google.maps.importLibrary('maps');
  
  // Notice that we don't care about the return value of this statement
  await google.maps.importLibrary('marker');
}

之后，您可以在整个应用程序中自由使用同步初始化程序：

const marker = new Marker({
  position: {lat: 53.5, lng: 10.05},
  map
});

也请查看相关游乐场。