Vue3高德地图自定义Marker

高德地图官方的文档，啥也没有，自带的Maker搞出来巨丑无比，怎么自定义Maker的Icon和Icon的大小也没说明白 …

请看VCR …

watch(
  [loaded, isLabel, iconSize],
  (
    [newLoaded, newIsLabel, newIconSize],
    [oldLoading, oldIsLabel, oldIconSize]
  ) => {
    if (newLoaded) {
      map.value.clearMap();
      for (let i = 0; i < Stations.length; i++) {
        let s = Stations[i];
        const marker = new AMap.Marker({
          position: [s.lng, s.lat],
          // size: new AMap.Size(24, 24),
          icon: new AMap.Icon({
            image: "data:image/png;base64, ...",
            imageSize: new AMap.Size(iconSize.value, iconSize.value), // 设置缩放后的大小（常用）
          }),
        });
        if (newIsLabel) {
          marker.setLabel({
            content: s.name,
            direction: "top",
            offset: [0, 0],
          });
        }
        map.value.add(marker);
      }
    }
  }
);

注意两个问题：

1. 监听@load，要等地图加载完了，才能加Marker …

2. Marker的setIcon的方法是没办法改变大小的 …

3. Marker的icon是不能用图片路径的，加载失败还会显示默认的图标，要转成Base64 …