我在 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;
使用聚类,当标记彼此靠近时将它们分组在一起。
<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;