无法在Google Maps Platform的WebGL地图中添加多个不同位置的GLTF标记

• 禁止复用标记/GLTF实例
  创建多个GLTF标记时，必须为每个标记单独创建全新的AdvancedMarkerElement实例和PinElement（GLTF加载实例），复用同一个实例会导致所有标记绑定同一个坐标引用，出现位置重叠。
• 正确修改已有标记的坐标
  不要直接修改marker.position.lat或marker.position.lng子属性，这类修改不会触发地图重绘，必须使用以下两种方式更新：
  1. 调用setPosition方法传入新坐标：marker.setPosition(new google.maps.LatLng(新纬度, 新经度))
  2. 直接给position属性赋值完整的坐标对象：marker.position = {lat: 新纬度, lng: 新经度}
• 修正模型偏移问题
  如果GLTF模型本身存在原点偏移，会出现坐标已修改但视觉上位置不变的情况，创建PinElement时可通过anchorPoint参数调整模型锚点对齐坐标点：

const pinElement = new google.maps.marker.PinElement({
  gltf: '你的GLTF模型路径',
  // 锚点取值范围0-1，(0.5,1)代表模型底部中心点对齐经纬度坐标点
  anchorPoint: new google.maps.Point(0.5, 1)
})

• 修复循环创建标记的闭包问题
  如果是循环批量生成标记，避免使用var声明坐标变量，会导致所有标记共享最后一次循环的坐标值，改为使用let/const声明每次循环的坐标变量，隔离作用域。
• 开启手动拖拽功能
  需要支持手动拖动调整标记位置时，创建标记时显式开启可拖拽属性：

const marker = new google.maps.marker.AdvancedMarkerElement({
  map: map,
  position: {lat: xx, lng: xx},
  content: pinElement.element,
  gmpDraggable: true
})
// 监听拖拽结束事件获取最新坐标
marker.addListener('dragend', (e) => {
  const newLat = e.latLng.lat()
  const newLng = e.latLng.lng()
})

常见错误代码（导致所有标记重叠）：

// 错误：全局复用同一个marker和GLTF实例
const marker = new google.maps.marker.AdvancedMarkerElement({map: map})
const gltfPin = new google.maps.marker.PinElement({gltf: 'car.gltf'})
const points = [{lat: 39.9, lng: 116.3}, {lat: 39.8, lng: 116.4}]
for (var i = 0; i < points.length; i++) {
  marker.position = points[i]
  marker.content = gltfPin
}

修正后代码：

const points = [{lat: 39.9, lng: 116.3}, {lat: 39.8, lng: 116.4}]
for (let i = 0; i < points.length; i++) {
  // 每个标记单独创建GLTF和marker实例
  const gltfPin = new google.maps.marker.PinElement({gltf: 'car.gltf'})
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: points[i],
    content: gltfPin.element,
    gmpDraggable: true
  })
}

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