使用PinElement自定义颜色的多个AdvancedMarkerElement仅显示单个同色标记

问题出在同一个DOM元素不能同时被多个AdvancedMarkerElement复用。你创建的pinGlyph0.element是单个DOM节点，当你把它赋值给marker1时，浏览器会自动把这个DOM节点从marker0的挂载位置移除，重新绑定到marker1上，导致marker0失去显示内容；同理pinGlyph1.element被marker3复用后，marker2的内容也被移走，最终每个颜色只显示最后一个绑定的标记。

解决方法 #

方法1：为每个标记创建独立的PinElement实例 #

给每个需要同色的标记单独创建PinElement，确保每个marker都拥有专属的DOM节点：

// 红色标记1
const pinRed1 = new PinElement({
  background: "#EB3324",
  borderColor: "#EB3324",
});
const marker0 = new AdvancedMarkerElement({position: L2083875, map: map, content: pinRed1.element,});

// 红色标记2
const pinRed2 = new PinElement({
  background: "#EB3324",
  borderColor: "#EB3324",
});
const marker1 = new AdvancedMarkerElement({position: L615687, map: map, content: pinRed2.element,});

// 黄色标记1
const pinYellow1 = new PinElement({
  background: "#FFFD55",
  borderColor: "#FFFD55",
});
const marker2 = new AdvancedMarkerElement({position: L614723, map: map, content: pinYellow1.element,});

// 黄色标记2
const pinYellow2 = new PinElement({
  background: "#FFFD55",
  borderColor: "#FFFD55",
});
const marker3 = new AdvancedMarkerElement({position: L5421822, map: map, content: pinYellow2.element,});

方法2：复制PinElement的DOM节点 #

如果不想重复创建PinElement，可以通过cloneNode(true)深复制DOM元素，让每个marker使用独立的克隆节点：

const pinRed = new PinElement({
  background: "#EB3324",
  borderColor: "#EB3324",
});
const marker0 = new AdvancedMarkerElement({position: L2083875, map: map, content: pinRed.element.cloneNode(true),});
const marker1 = new AdvancedMarkerElement({position: L615687, map: map, content: pinRed.element.cloneNode(true),});

const pinYellow = new PinElement({
  background: "#FFFD55",
  borderColor: "#FFFD55",
});
const marker2 = new AdvancedMarkerElement({position: L614723, map: map, content: pinYellow.element.cloneNode(true),});
const marker3 = new AdvancedMarkerElement({position: L5421822, map: map, content: pinYellow.element.cloneNode(true),});

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