logo标签列表

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

javascriptgoogle-mapsreactjsreact-native
21
  • 我想在React Native的MapView上设置一个标记，但是我在MapView官方文档中找不到任何相关信息。
  • 如果这种方法不被允许，我该如何在React Native中使用已有的react模块，例如react-googlemaps？
要求我们推荐或寻找书籍、工具、软件库、教程或其他外部资源的问题，因为它们往往会吸引带有个人观点的答案和垃圾邮件，所以在 Stack Overflow 上是不适合的。 - mate64
8个回答
47

感谢 @naoufal。 最终，我可以在React Native 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- 在地图上显示标记

29
您可以使用annotations属性来设置标记。
例如：
var markers = [
  {
    latitude: 45.65,
    longitude: -78.90,
    title: 'Foo Place',
    subtitle: '1234 Foo Drive'
  }
];

<MapView
  region={...}
  annotations={markers}
/>
1
@ivanwang 如果这对你有用，请告诉我。如果是的话，你能将其标记为正确答案吗？ - naoufal
3
这个有关安卓系统的问题有没有最新消息？ - James111
3
你可以将<Marker>作为children传递，但是annotations属性不再可用。 - Fabrizio Bertoglio
6
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>
针对Android，但请先进行基本设置以渲染地图。 - Kishan Madhwani
请考虑向问题提出者解释您的答案。 - Murat Aslan
@MuratAslan，我没听懂你的意思。你想让我解释答案吗？ - Kishan Madhwani
3

对于那些需要动态获取（例如从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...
});
2

更新代码 - 2020年 | React Native 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>
1
根据这个问题，它还没有被公开。您也无法使用web-React包，React Native不是这样工作的。
两个建议：
  1. 等待上述问题得到解决以获得适当的API
  2. 尝试使用WebView链接到带注释的Google地图
我实际上并不确定第二个建议是否可行。
使用了＃2之后，我觉得最好的方式是＃1...所以我会等待。谢谢~ - ivan wang
MapView现在支持注释。我已经添加了一个带有示例的答案。 - naoufal
1

Thank you @zia_qureshi. Finally I am able to display markers on map for react native 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;

在添加代码之前需要安装和配置（react-native-maps）。 - Zia Qureshi
1
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>```

const styles = StyleSheet.create({

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

});

"dependencies": { "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" },

依赖关系包括native-base、react、react-native和react-native-maps。其中，native-base版本为2.13.8，react版本为16.9.0，react-native版本为0.61.2，react-native-maps的链接为https://git@github.com/react-native-community/react-native-maps.git。

Try using this. Hope it helps to mark for many locations. Happy Coding.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接