React Native Maps 按标记显示不正确的标注和标记

Question

我正在使用 Expo 39.0.2 和 react-native-maps 0.27.1（撰写本文时的最新版本）。我使用 Markers 和 Callouts 在地图上显示点及其信息。但是，每当我点击 Marker 时，另一个 Callout 就会出现，原来的 Marker 也会被替换，但是当我关闭 Callout 时， Marker 是背部。这出现在 iOS 和 Android.

上

（代码已大大简化，因此可能缺少某些功能）

import React, { useState, useEffect, useRef } from 'react';
import { View, Dimensions } from 'react-native';
import MapView, { UrlTile, Marker, Callout } from 'react-native-maps'
import { Text } from 'native-base';
import config from '../config.json';

function MapScreen({ navigation }) {
    const width = Dimensions.get('window').width;
    const height = Dimensions.get('window').height;

    const INITIALREGION = {
        latitude: 23.56621,
        longitude: 120.96666,
        latitudeDelta: 3,
        longitudeDelta: 3,
    }

    const MAP_TYPE = Platform.OS == 'android' ? 'none' : 'standard';
    const urlTemplate = 'http://c.tile.openstreetmap.org/{z}/{x}/{y}.png';

    const [stations_info, set_stations_info] = useState([]);

    useEffect(() => {
        fetch(config.request.hostname + config.request.api_prefix + "/station", {
            method: "GET"
        })
        .then((response) => response.json())
        .then((data) => {
            data = data.map((value) => {
                value.name = value.device;
                value.show = true;
                value.color = function_that_determines_color(value.record);
                return value;
            });
            set_stations_info(data);
        })
        .catch((error) => {
            console.error(error);
        });
    }, []);
    const mapRef = useRef();
    return (
        <View style={{ flex: 1 }}>
            <MapView
                style={{ flex: 1, width: width, height: height }}
                mapType={MAP_TYPE}
                initialRegion={INITIALREGION}
                ref={mapRef}
                >
                <UrlTile urlTemplate={urlTemplate} zIndex={1} />
                {
                    stations_info.filter(v => v.show).map((station, index) => (
                        <Marker
                            coordinate={{ latitude: station.latitude, longitude: station.longitude }}
                            title={station.name}
                            pinColor={station.color}
                            tracksViewChanges={true}
                            key={index}
                        >
                            <Callout onPress={() => navigation.navigate('Info', { station_id: station.id, name: station.name }) }>
                                <Text>Station: {station.name}</Text>
                                {
                                    Object.entries(station.record).map((value, key) => (
                                        <Text key={key}>{value[0]}: {value[1]}</Text>
                                    ))
                                }
                                <Text>Click to see more</Text>
                            </Callout> 
                        </Marker >
                    ))
                }
            </MapView>
        </View>
    );
}

以上面的GIF为例，marker是红色的，但是点击marker后变成黄色，callout显示的信息不正确（这个callout应该属于另外一个marker），之后关闭它，标记的颜色又正确了。

Answer 1

我想我已经明白发生了什么事了。

问题在于，当多个标记共享完全相同的经度和纬度时，无法保证按下标记只会触发最上面标记的 onPress，而是可能会触发多个事件。解决方法是，要么确保每个标记都有不同的位置，要么为重叠标记添加一个小的偏移量。

React Native Maps 按标记显示不正确的标注和标记

React Native Maps pressing Marker shows incorrect Callout and Marker

javascript

react-native

react-native-maps

expo