标签: react-native-maps

我正在开发一个地图位置.当我在某个特定的地方点击时,我得到纬度和经度,但不是当前的位置,纬度和经度.

我不知道如何找出答案.

我怎样才能得到它们？如何将标记放在那个位置？

这是我的代码:

class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude:       LATITUDE,
        longitude:      LONGITUDE,
        latitudeDelta:  LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      marker: {
        latlng:{
          latitude:       null,
          longitude:      null,
          latitudeDelta:  LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }
      }
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition (
      (position) => { alert("value:" + position) },
      (error)    => { console.log(error) },
      {
        enableHighAccuracy: true,
        timeout:            20000,
        maximumAge:         10000
      }
    )
  }

  onMapPress(e) {
    alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate))
      this.setState({
        marker: [{ coordinate: e.nativeEvent.coordinate }]
      })
    } …

我使用react-native来构建地图应用程序.我使用的api来自以下链接:https://github.com/lelandrichardson/react-native-maps.下面是我在我的应用上带来地图的代码.我徘徊如何在该地图上给出缩放值.以及当用户单击地图上的按钮时,如何更改缩放值.我应该使用什么缩放API来实现这一目标？

import React, {


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
 //MapView,
} from 'react-native';

import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 30,
    flex: 1,
    alignItems: 'center'
  },
  inputText: {
    height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
  }
});

class MapPage …

我是反应原生的新手,我想在我的应用程序中集成地图,我正在使用"react-native-maps"库, 我想使用https://github.com/airbnb/react-native-maps聚类,但我无法找到与此相关的适当文件.请帮助我找到如何将地图与群集集成的文档,并告诉哪个库最适合实现两个平台,iOS和Android的群集.

我正在使用本机反应,我只想链接我的字体而不是别的.

我正在使用react-native-maps,它在文档中特别说"不要使用react-native link"

无论我到哪里,我都会看到人们react-native link为了链接字体而说要做但我很怀疑是否有正确的语法来链接字体,如:

react-native link ./assets/fonts或者其他的东西？这样它也不会链接我所有的其他库

在本机mapview的示例中,它们具有latitudeDelta和longitudeDelta.它是否等于高度和宽度？在什么单位？它说,根据他们的github评论

要显示的最小和最大纬度/经度之间的距离.

但这并没有帮助我.我想知道用户在地图上看到了什么.

我在我的反应本机项目中使用navigator.geolocation.watchPosition在用户移动时在地图上绘制路径.我注意到此功能的返回频率非常低.当我使用iOS模拟器和gps模拟器中的"高速公路驱动"模式进行测试时,我教过它至少是频率.现在,当我用"城市跑"测试时,我可以看到位置的返回频率不依赖于某个时间间隔,而是取决于距离...该功能每100米返回一次位置,无论如何这个职位需要多长时间才能改变这一点.

为什么会这样？这是预期的行为吗？我不知道它是否与iOS模拟器或我的代码有关,但我真的希望这个位置更精确,我希望它尽可能频繁地返回.

componentDidMount() {
    const { region } = this.state;

    navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({position});
        },
        (error) => alert(JSON.stringify(error)),
        {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );

    this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
        var { distanceTotal, record } = this.state;
        this.setState({lastPosition});
        if(record) {
            var newLatLng = {latitude:lastPosition.coords.latitude, longitude: lastPosition.coords.longitude};

            this.setState({ track: this.state.track.concat([newLatLng]) });
            this.setState({ distanceTotal: (distanceTotal + this.calcDistance(newLatLng)) });
            this.setState({ prevLatLng: newLatLng });
        }
    },
    (error) => alert(JSON.stringify(error)),
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 0});
} 

我正在安装react-native-maps. 在安装指南中，在第 3.1 节的Android上的构建配置中，它显示：

buildscript {
    ext {
        buildToolsVersion = "xxx"
        minSdkVersion = xxx
        compileSdkVersion = xxx
        targetSdkVersion = xxx
        supportLibVersion = "xxx"
        playServicesVersion = "xxx" // or set latest version
        androidMapsUtilsVersion = "xxx"
    }
}
...

我怎样才能得到 supportLibVersion,playServicesVersion 和androidMapsUtilsVersion值？

我正在使用react-native-maps但是我遇到了一个问题,经过大量谷歌搜索没有回答让我在这里问.我正在尝试使用自定义标记作为地图中的标记,如下图所示

• 当我搜索时,我发现需要使用Custom Marker来完成制作者的设计,然后我创建了一个Custom Marker组件

  import React, { Component } from "react";
  import { View } from "react-native";
  import {
  Text,
  Left,
  Right,
  Thumbnail,
  } from "native-base";
  const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
  class CustomMarker extends Component {
  render() {
      return (
      <View style={{ flexDirection: 'row', width: 140, height: 60, 
        borderRadius: 70, backgroundColor: 'orange' }}>
          <Left>
              <Thumbnail source={defaultEmployeeLogo} />
          </Left>
          <Right>
              <Text style={{
                  color: '#fef',
                  fontSize: 13,
                  paddingBottom: 2,
                  fontFamily: 'Roboto',
                  alignItems: 'center',
                  paddingRight: 10
              }}>Mohammad</Text>
          </Right></View >);
     }
  }
  export …

  Run Code Online (Sandbox Code Playgroud)

我有一个基本的反应本机应用程序,它使用React Native Maps来显示位置标记(其纬度和经度从我的API中提取).

但是,这个应用程序在iPhone 7模拟器上使用了超过200MB的内存.这是正常的吗？我之前使用Swift过应用程序,内存使用量很少超过100MB.

如果我使用他们在他们的示例中提供的这个文件制作示例应用程序,它仍然使用超过200MB的内存:可拖动标记

我使用的是真正的Android设备(版本5.1)

我能够确定使用反应 - 原生地图(我的应用程序内的地图正确蓝点位置)+我能够使用谷歌地图应用程序,并转到我的位置(GPS工作)我的位置.

我正在使用一个大的超时,将enableHighAccuracy切换为true和false,删除选项等等.都没能得到navigator.geolocation来获取数据.

这是我的代码:

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
};

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
};

navigator.geolocation.getCurrentPosition(success, error, options);

我正进入(状态 : ERROR(3): Location request timed out