Question

我需要您的帮助，以了解如何在MapView中显示GPS坐标。

我想通过gps坐标（经度和纬度）跟踪一个人的位置。

我为恢复MapView中的坐标付出了太多努力，但由于没有到达目的地，所以被阻止了。

因此，我从Web服务获取坐标，并将其显示在TextView中。

这是我的代码：

import React, { Component } from 'react';
import { Constants, Location, Permissions } from 'expo';
import { Card } from 'react-native-paper';
import { Polyline } from 'react-native-maps';
import {
  StyleSheet,
  Platform,
  View,
  ActivityIndicator,
  FlatList,
  Text,
  Image,
  TouchableOpacity,
  Alert,
  YellowBox,
  AppRegistry,
  Button,
} from 'react-native';
export default class gps extends Component {
   static navigationOptions = ({ navigation }) => {
    return {
      title: 'Suivi GPS',
      headerStyle: {
        backgroundColor: 'transparent',
      },
      headerTitleStyle: {
        fontWeight: 'bold',
        color: '#000',
        zIndex: 1,
        fontSize: 18,
        lineHeight: 25,
        fontFamily: 'monospace',
      },
    };
  }
  state = {
    mapRegion: null,
    dat: '',
  };
GetItem() {}
  componentDidMount() {
    this.webCall();
  }
  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#000',
        }}
      />
    ); //
  };
  webCall = () => {
    return fetch('http://first-ontheweb.com/onLineSenior/pos.php')
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
        });
      })
      .catch(error => {
        console.error(error);
      });
  };
  render() {
    if (this.state.isLoading) {
      return (
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
return (
  <View style={styles.map}>  
    <FlatList
      data={this.state.dataSource}
      ItemSeparatorComponent={this.FlatListItemSeparator}
      renderItem={({ item }) => (
        <View>
          <Text style={styles.textView}>Longitude :</Text>
          <Text style={styles.textView}>{item.longitude}</Text>
          <Text style={styles.textView}>Latitude :</Text>
          <Text style={styles.textView}>{item.latitude}</Text>
        </View>
      )}
      keyExtractor={(index) => index.toString()}
    />
  </View>
);
  }
}
const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

因此，我想在MapView中显示GPS坐标。

谢谢。

Answer 1

您可以执行以下操作：

首先导入mapView：

import MapView from "react-native-maps";

然后：

state = {
    focusedLocation: {
      latitude: 37.7900352, //or your coordinates
      longitude: -122.4013726, //or your coordinates
      latitudeDelta: 0.0122,
      longitudeDelta:
        Dimensions.get("window").width /
        Dimensions.get("window").height *
        0.0122
    }
  };

  render() {
    let marker = null;

    if (this.state.locationChosen) {
      marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
    }

    return (
      let marker = <MapView.Marker coordinate={this.state.focusedLocation} />;
      <View style={styles.container}>
        <MapView
          initialRegion={this.state.focusedLocation}
          style={//map style here}
        >
          {marker}
        </MapView>
      </View>
    );
  }

Answer 2

您需要安装react-native-maps软件包

import MapView from 'react-native-maps';

渲染具有初始区域的地图

<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

在将区域控制为状态的同时使用MapView

getInitialState() {
  return {
    region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };
}

onRegionChange(region) {
  this.setState({ region });
}

render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
    />
  );
}

在地图上呈现标记列表

import { Marker } from 'react-native-maps';

<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

您可以在此处的文档中找到更多信息。

https://github.com/react-native-community/react-native-maps

如何在Mapview中显示GPS坐标？

2 个答案: