react-native-maps pin切换到苹果Map上的另一个pin

pkwftd7m  于 2023-05-01  发布在  React
关注(0)|答案(1)|浏览(151)

我在react-native-maps中遇到了一个奇怪的苹果Map问题。每当一个引脚被点击,它切换到另一个引脚时,他们是在彼此接近,请参阅下面的GIF更清楚地了解什么是错误的。此外,当拖动大头针时,会导致许多onpress调用。有什么办法可以抑制它吗?对于每个标记,没有“onPress”、“onDrag”或它们的变体有助于此行为。即使完全删除onPress或onSelect方法也无助于此行为。任何帮助将不胜感激。
使用gif更容易:

在Map上拖动点时也会出现意外行为:

下面是我的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;
ny6fqffe

ny6fqffe1#

使用聚类,当标记物彼此非常接近时,将标记物分组在一起。

<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;

相关问题