react-native-maps 标记未显示

Question

markersArr - 包含标题、纬度和经度的 objects 数组：

Array [
  Object {
    "latitude": 31.74972996282075,
    "longitude": 35.23612361202195,
    "title": "ארמון הנציב",
  },
  Object {
    "latitude": 31.779044392761453,
    "longitude": 35.18955094821394,
    "title": "בית הכרם",
  },
  Object {
    "latitude": 31.765429951578884,
    "longitude": 35.231964301905144,
    "title": "אבו תור",
  },
  Object {
    "latitude": 31.748258119122376,
    "longitude": 35.21971512763567,
    "title": "ארנונה",
  },
]

硬编码的 Marker 显示但另一个不显示，我不明白为什么。数组中的数据是正确的。

这是return声明：

return (
<SafeAreaView style={globalStyles.mapScreenContainer}>
  <MapView
    style={globalStyles.map}
    region={mapRegion}
    provider={null}
    onMarkerPress={(e) => handleMarkerPressed(e)}
  >
    <Marker
      coordinate={{ latitude: 31.7851951925, longitude: 35.2060641757 }}
      pinColor={"purple"}
      title={"מרכז מאי"}
      description={"מיקום העמותה"}
      onPress={() => {
        console.log("");
      }}
    />

    {markersArr.map((marker) => {
      console.log(marker);
      <Marker
        coordinate={{
          latitude: marker.latitude,
          longitude: marker.longitude,
        }}
        pinColor={"purple"}
        title={marker.title}
        onPress={() => {
          handleMarkerPressed();
        }}
      />;
    })}
  </MapView>
</SafeAreaView>
  );

和整个组件（如有必要）：

import React, { useState, useEffect, Component } from "react";
import MapView, { Marker } from "react-native-maps";
import { SafeAreaView } from "react-native-safe-area-context";
import { globalStyles } from "../../styles/global";
import { useData } from "../../AuthProvider/UserDataProvider";

const MapScreen = () => {
  const { markers, getMarkers } = useData();
  const [markersArr, setMarkersArr] = useState([]);
  const [mapRegion, setmapRegion] = useState({
    latitude: 31.7851951925,
    longitude: 35.2060641757,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });
  const handleMarkerPressed = (event) => {
    // console.log(event.nativeEvent);
  };

  useEffect(() => {
    getMarkers().then(() => {
      for (const marker in markers) {
        if (markers.hasOwnProperty.call(markers, marker)) {
          setMarkersArr((prev) => [
            ...prev,
            {
              title: marker,
              latitude: markers[marker].latitude,
              longitude: markers[marker].longitude,
            },
          ]);
        }
      }
    });

    return () => {};
  }, []);

  return (
    <SafeAreaView style={globalStyles.mapScreenContainer}>
      <MapView
        style={globalStyles.map}
        region={mapRegion}
        provider={null}
        onMarkerPress={(e) => handleMarkerPressed(e)}
      >
        <Marker
          coordinate={{ latitude: 31.7851951925, longitude: 35.2060641757 }}
          pinColor={"purple"}
          title={"מרכז מאי"}
          description={"מיקום העמותה"}
          onPress={() => {
            console.log("");
          }}
        />

        {markersArr.map((marker) => {
          console.log(marker);
          <Marker
            coordinate={{
              latitude: marker.latitude,
              longitude: marker.longitude,
            }}
            pinColor={"purple"}
            title={marker.title}
            onPress={() => {
              handleMarkerPressed();
            }}
          />;
        })}
      </MapView>
    </SafeAreaView>
  );
};

export default MapScreen;

渲染地图时没有出现错误

Answer 1

我忘记了 map 中的 return，添加了它，现在可以使用了

react-native-maps 标记未显示

react-native-maps markers not showing

react-native

react-native-maps