我在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;
1条答案
按热度按时间ny6fqffe1#
使用聚类,当标记物彼此非常接近时,将标记物分组在一起。
要防止
onPress
多次触发,可以使用lodash.debounce
对函数调用进行反跳。