Flutter中Lottie自定义Google Map可拖拽标记的拖拽阻塞与错位问题

问题1：自定义标记阻止地图拖拽 #

自定义标记组件会拦截触摸事件，导致点击标记区域无法触发地图拖拽。解决核心是让触摸事件透传到地图层：

• 在自定义标记的外层容器添加pointerEvents='none'属性，确保触摸事件能穿透到下方的MapView。
• 若标记需保留交互（比如点击事件），可单独给需要交互的元素设置pointerEvents='auto'，外层仍保持none。

示例代码修改：

_getCustomPin = () => {
  return (
    <View style={{width: 150, height: 150, pointerEvents: 'none'}}>
      <LottieView
        source={require('./RedMarkerPIN.json')}
        autoPlay
        loop
        style={{width: '100%', height: '100%'}}
      />
    </View>
  );
};

问题2：标记与位置指示器错位 #

错位根源是Marker默认锚点（中心）与自定义标记的尖端位置不匹配，调整锚点即可校准：

1. 设置Marker的anchor={{x: 0.5, y: 1}}，让标记的底部中心对准地图坐标点（符合标记尖端指向位置的逻辑）。
2. 自定义标记宽高设为150时，锚点调整后位置会自动匹配坐标点，无需额外偏移。

示例Marker组件修改：

<MapView.Marker
  coordinate={currentLocation}
  anchor={{x: 0.5, y: 1}} // 关键：锚点设为底部中心
>
  {this._getCustomPin()}
</MapView.Marker>

DoorDash式拖拽标记完整逻辑 #

要实现拖拽时标记固定、地图移动的效果，需结合MapView的相机事件同步坐标：

• 拖拽地图时，通过onCameraMove获取当前相机中心坐标，更新标记绑定的位置数据。
• 保持Marker始终显示在地图中心，无需额外跟随拖拽逻辑（相机移动时坐标已同步更新）。

核心代码片段：

<MapView
  style={{flex: 1}}
  initialRegion={initialRegion}
  onCameraMove={(event) => {
    // 将当前位置同步为相机中心坐标
    this.setState({
      currentLocation: event.nativeEvent.coordinate
    });
  }}
>
  <MapView.Marker
    coordinate={this.state.currentLocation}
    anchor={{x: 0.5, y: 1}}
  >
    {this._getCustomPin()}
  </MapView.Marker>
</MapView>

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