react-native-maps pin switches to another pin close proximity on apple maps

Question

我在 react-native-maps 中遇到了苹果地图的奇怪问题。每当单击一个 pin 时，当它们彼此靠近时它会切换到另一个 pin，请查看下面的 gif 以更清楚地了解问题所在。此外，拖动图钉时，会导致许多 onpress 调用。有什么办法可以抑制吗？对于每个标记，没有“onPress”、“onDrag”或它们的变体有助于此行为。即使删除 onPress 或 onSelect 方法也完全无助于此行为。 任何帮助将不胜感激。

用gif更容易展示：

在地图上拖动点时也有意想不到的行为：

这是我的 Mapview 组件：

<MapView
        //provider={PROVIDER_GOOGLE} use apple maps on ios
        //
        showsBuildings={false}
        showsTraffic={false}
        showsIndoors={false}
        showsCompass={false}
        showsScale={false}
        //
        //
        initialRegion={{
          latitude: -25.2743988,
          longitude: 133.7751312,
          latitudeDelta: 40,
          longitudeDelta: 40,
        }}
        style={styles.map}
        showsUserLocation
        showsMyLocationButton={false}
        ref={mapRef}
      >
        {markedPlaces.map((place) => (
          <MapMarker
          key={place.placeId}
          place={place}
          placeInfo={placeInfo}
          onPress={() => handleFocusPlace(place)}/>
          )
        )
        }
</MapView>

我的标记组件：

import React from 'react';
import { Marker } from 'react-native-maps';
import { Place } from '../../models';
import { createDescription, createPinColor } from './utils';

type MapMarkerProps = {
  place: Place;
  placeInfo: Place | null;
  onPress: (place: Place) => void;
};

const MapMarker: React.FC<MapMarkerProps> = React.memo(({ place, placeInfo, onPress }) => {
  //console.log('Place Data:', place)
  //console.log("placeinfo data:", placeInfo)
  //console.log("place rating for this marker:", place.rating)
  const description = createDescription(place);
  const pinColor = createPinColor(place.rating);

  return (
    <Marker
      key={place.placeId}
      coordinate={place.location}
      title={place.name}
      description={description}
      onPress={() => onPress(place)}
      onCalloutPress={() => onPress(place)}
      pinColor={pinColor}
      tracksViewChanges={false}
      //may need to disable on android
      stopPropagation={true}
      onSelect={() => onPress(place)}
      //onDeselect={() => onPress(place)}



      
    />
  );
});

export default MapMarker;

Answer 1

使用聚类，当标记彼此靠近时将它们分组在一起。

<MapView
  // ...
  cluster={true}
  radius={50}
  maxZoomLevel={15}
>
  {markedPlaces.map((place) => (
    <MapMarker
      key={place.placeId}
      place={place}
      placeInfo={placeInfo}
      onPress={() => handleFocusPlace(place)}
    />
  ))}
</MapView>

为了防止

onPress

多次触发，您可以使用

lodash.debounce

去抖动函数调用。

import React from 'react';
import { Marker } from 'react-native-maps';
import { Place } from '../../models';
import { createDescription, createPinColor } from './utils';
import debounce from 'lodash.debounce';

type MapMarkerProps = {
  place: Place;
  placeInfo: Place | null;
  onPress: (place: Place) => void;
};

const MapMarker: React.FC<MapMarkerProps> = React.memo(({ place, placeInfo, onPress }) => {
  const description = createDescription(place);
  const pinColor = createPinColor(place.rating);

  // Debounce the onPress event to prevent multiple calls when dragging the marker
  const handlePress = React.useMemo(() => debounce(onPress, 100, { leading: true, trailing: false }), [onPress]);

  return (
    <Marker
      // ...
      onPress={() => handlePress(place)}
      onCalloutPress={() => handlePress(place)}
      onSelect={() => handlePress(place)}
    />
  );
});

export default MapMarker;