如何在 React Native 的 MapView 中設置標記

Question

• 我想在 React Native 中的 MapView 上設置一個標記，但是通過MapView的官方文檔找不到任何信息。
• 如果不允許以這種方式，我如何在 React Native 中使用現有的 react 模塊，例如react-googlemaps ？

Answer 1

謝謝@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

Answer 2

您可以使用annotations屬性設置標記。

例如：

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

<MapView
  region={...}
  annotations={markers}
/>

Answer 3

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>

Answer 4

對於那些尋找動態（例如，來自 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...
});

Answer 5

更新代碼 - 2020 | 反應原生 0.63

import MapView, { Marker } from "react-native-maps";
<MapView
    style={styles.mapStyle}
    region={{
        latitude: this.state.mapLat,
        longitude: this.state.mapLong,
        latitudeDelta: 0.001663,
        longitudeDelta: 0.002001,
            }}
        onRegionChangeComplete={this.onRegionChange}
>
    <Marker
        coordinate={{latitude: 51.5078788, longitude: -0.0877321}}
    >
    </Marker>
</MapView>

Answer 6

根據這個問題，它還沒有被曝光。 你也不能使用 web-React 包，React Native 不能那樣工作。

兩個建議：

1. 等待上述問題得到解決以獲取正確的 API
2. 嘗試使用 WebView 鏈接到帶有注釋的 Google 地圖

我實際上不確定＃2是否可能。

Answer 7

import MapView from 'react-native-maps';
<View style={StyleSheet.absoluteFillObject}>
        <MapView style={styles.map}
          showsUserLocation //to show user current location when given access
          loadingEnabled //to show loading while map loading
          style={styles.map}
          initialRegion={{
              latitude,
              longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
          }}
        >
        {

             locations && locations.map((location, index) => {
                   const {
                       coords: { latitude, longitude }
                          } = location;
                                return (
                                    <MapView.Marker
                                        key={index}
                                        coordinate={{ latitude, longitude }}
                                        title={"title"}
                                        description={"address"}
                                        // onPress={this.onMarkerPress(location)}
                                    />
                                )
                            })
                        }
      </MapView>
 </View>```

常量樣式 = StyleSheet.create({

map: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
}

});

“依賴”：{ “native-base”：“^2.13.8”，“react”：“16.9.0”，“react-native”：“0.61.2”，“react-native-maps”：“git+ https://git@github.com/react-native-community/react-native-maps.git " },

Try using this. Hope it helps to mark for many locations. Happy Coding.

Answer 8

謝謝@zia_qureshi。 最后，我能夠在地圖上顯示標記以響應原生 android。

 import MapView, { Marker } from "react-native-maps"; const App = () => { const [region, setRegion] = useState({ latitude: 51.5078788, longitude: -0.0877321, latitudeDelta: 0.009, longitudeDelta: 0.009 }); return ( <MapView style={{ flex: 1 }} region={region} onRegionChangeComplete={region => setRegion(region)} > <Marker coordinate={{ latitude: 51.5078788, longitude: -0.0877321 }} /> </MapView> ); }; export default App;

Answer 9

您可以嘗試使用網絡視圖-

var html = '<!DOCTYPE html><html><body><div "class="google-maps"
style="position:absolute; bottom:0px; overflow:hidden; height:100%; left:0px; width:100%"><iframe frameborder="0" width="100%" height="120%" style="margin-top:-30%;"  scrolling="no" src="https://www.google.com/maps/embed/v1/place?key=yourKEY &q=Space+Needle,Seattle+WA" allowfullscreen> </iframe> </google-maps></body></html>';
return (
<View style={styles.container}>
  <WebView html={html}/>
</View>

可以使用標記和其他選項。 希望對您有所幫助！