时间戳

首页 > 解决方案 > 反应原生地图视图我如何以简单的方式获取用户坐标

javascript - 反应原生地图视图我如何以简单的方式获取用户坐标

问题描述

有没有办法在反应原生地图视图中获取用户坐标？

我正在尝试在用户和标记之间制作一条折线，但我不知道如何。如果它不使用组件安装或redux会更好，但是如果没有办法，请包括如何使用它的详细信息，因为我是初学者。

我的代码是：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Polyline } from 'react-native-maps';

import Rectangle from './spotInfo'

export default class App extends React.Component {
  
  state = {
    spotName: "No Spot Selected!", spotDesc: "Select a spot to show info.", long: "", lat: "" ,
    currentSpot: {
      latitude: 52.5200066,
      longitude: 13.404954
    },
    Gotospot: {
      latitude: 50.1109221,
      longitude: 8.6821267
    },
  }
  
  updateState = (name, desc, long, lat) => {
    console.log(position.coords.latitude)
    this.setState({ spotName: name, spotDesc: desc, long: long, lat: lat })}
  MarkerPress = (spotName, spotDesc, long, lat) => this.updateState(spotName, spotDesc, long, lat)
  render() {
  
    
  
    return (
        <MapView
          style={{ flex: 1 }}
          provider={PROVIDER_GOOGLE}
          showsUserLocation
          initialRegion={{
          latitude: 47.497913,
          longitude: 19.040236,
          latitudeDelta: 0.2,
          longitudeDelta: 0.2}}
          showsUserLocation={true}
          followUserLocation={true}
          >
          <MapView.Marker coordinate={{latitude: 47.497913, longitude: 19.040236}} onPress={(e) => {e.stopPropagation(); this.MarkerPress('Deak Ter', 'An Awesome skatepark with a bowl.' , '47.497913', '19.040236')}} />
          <MapView.Marker coordinate={{latitude: 47.487913, longitude: 19.030236}} onPress={(e) => {e.stopPropagation(); this.MarkerPress('Deak Ter2', 'An Awesome skatepark without a bowl.' , '47.487913', '19.030236')}} />
          <Polyline coordinates={[this.state.currentSpot, this.state.Gotospot]} />
          <Rectangle spotName = {this.state.spotName} spotDesc={this.state.spotDesc}/>
        </MapView>
    );
  }
}

标签： javascriptreact-nativemobilemapscoordinates

解决方案

您已经正确放置了道具showsUserLocation={true}，但是如果您使用的是 iOS，则可以在 ``Ìnfo.plist`` 中添加一个新项目，如下图所示：显示用户位置

要获得坐标纬度和经度，你有 prop onUserLocationChange。当地图确定用户位置时，它会返回一个回调：onUserLocationChange

有关更多详细信息，您可以直接在react-native-maps的文档中查看。

等待您的反馈意见。谢谢 ：）。如果您有更多疑问，请随时提问。

推荐阅读