如何在 React Native 的 MapView 中设置标记

IT技术 javascript google-maps reactjs react-native
2021-05-06 09:35:52
  • 我想在 React Native 中的 MapView 上设置一个标记,但是通过MapView 的官方文档找不到任何信息
  • 如果这种方式不允许,我如何在 React Native 中使用现有的Reactmodule,例如react-googlemaps
4个回答

谢谢@naoufal。最后,我能够在地图上显示标记以响应本机 IOS。

<View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0,
              longitudeDelta: 0.0,
          }}
        >
        <MapView.Marker
            coordinate={{latitude: 37.78825,
            longitude: -122.4324}}
            title={"title"}
            description={"description"}
         />
      </MapView>
 </View>

对于地图和容器样式,我使用了以下样式:

 var styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    map: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }
});

我参考了以下链接: React native IOS-Display Markers on map

您可以使用props设置标记annotations

例如:

var markers = [
  {
    latitude: 45.65,
    longitude: -78.90,
    title: 'Foo Place',
    subtitle: '1234 Foo Drive'
  }
];

<MapView
  region={...}
  annotations={markers}
/>
import MapView, { Marker } from 'react-native-maps';

<View>
    <MapView
    style={styles.mapStyle}
    initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
    }}
    >
        <Marker coordinate = {{latitude: 37.78825,longitude: -122.4324}}
         pinColor = {"purple"} // any color
         title={"title"}
         description={"description"}/>
    </MapView>
</View>

对于那些寻找动态(例如,来自 API)而不是硬编码坐标的人;这是来自自动生成的屏幕之一的复制/粘贴片段Expo CLI,包括React Hooks

import axios from "axios";
import MapView from "react-native-maps";
import { Dimensions, StyleSheet } from "react-native";
import { Marker } from "react-native-maps";
import { Text, View } from "../components/Themed";

export default function TabTwoScreen() {
  const [markers, setMarkers] = useState(null);

  useEffect(() => {
    axios({
      method: "GET",
      url: "https://API_URL...",
      headers: {
        Authorization: `Bearer MY_TOKEN_ABC123...`,
        Accept: "application/json",
      },
    })
      .then((response) => {
        setMarkers(response.data.results);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []); // "[]" makes sure the effect will run only once.

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Two</Text>
      <MapView style={styles.map}>
        {markers &&
          markers.map((marker: any, index: number) => (
            <Marker
              key={index}
              coordinate={{
                latitude: marker.location[1],
                longitude: marker.location[0],
              }}
              title={marker.title}
              description={marker.description}
            />
          ))}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  // Add your styles here...
});