标签: react-native-maps

反应本机：https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz 反应：16.13.1 反应本机地图：0.28.0

我想将标记作为快照的一部分。当我们使用takeSnapshot方法时，所有标记都将被忽略。

const snapshot = this.viewRefTest.takeSnapshot({
  format: 'png', // image formats: 'png', 'jpg' (default: 'png')
  quality: 0.5, // image quality: 0..1 (only relevant for jpg, default: 1)
  result: 'file', // result types: 'file', 'base64' (default: 'file')
});

<MapView
  ref={(viewRefTest) => {
    this.viewRefTest = viewRefTest;
  }}
  showsUserLocation={true}
  followUserLocation={true}>
  <MapView.Marker coordinate={item.location}>
    <Image
      style={{ width: 30, height: 30 }}
      source={require('../../assets/images/trophy.png')}
    />
    <Callout style={{ width: 250, flexDirection: 'row', alignItems: 'center' }}>
      <Text>$23</Text>
      <View>
        <Text style={{ fontSize: 12 }}>Custom Text!</Text> …

我使用以下代码但没有成功:

//在NativeBase容器内部

        <MapView.Animated
           ref="map"
           style = {styles.map}
           showsUserLocation = {true}
           zoomEnabled = {true}
           showsMyLocationButton = {true}
           showsCompass = {true}
           showScale = {true}
           showsIndoors = {true}
           mapType = {this.state.mapTypes[this.state.mapTypeCode]}
        />

//在类的componentDidMount内部

navigator.geolocation.getCurrentPosition(
  (position) => {
    var initialPosition = JSON.stringify(position.coords);
    this.setState({position: initialPosition});

    let tempCoords = {
      latitude: Number(position.coords.latitude),
      longitude: Number(position.coords.longitude)
    }

    this.refs.map.animateToCoordinate(tempCoords, 1);

  }, function (error) { alert(error) },

);

但是发生了一个错误,说没有这样的函数animateToCoordinate.

我正在使用react-native-maps模块.我给出了lat和long值,我使用MapView.Marker在单击标记时显示标记和工具提示.

但是,现在我想显示工具提示,而不是在最初加载地图时点击标记.

这是我的代码:

<View style={styles.page}>
        <MapView
          ref="map"
          style={styles.map}
          region={this.state.region}
          provider = {PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChange={this.onRegionChange.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          liteMode={false}
          showsBuildings={true}
          showsTraffic={true}
          showsIndoors={true}
        >
        <MapView.Marker
      coordinate={this.state.marker.latlng}
      title={this.state.marker.title}
      description={this.state.marker.description}
      image={require('./assets/pin.png')}

    />

        </MapView>
      </View>

任何人都可以帮助解决这个问题......

我试图使用react-native地图在android设备上的当前用户地理位置上渲染地图。

这是到目前为止我得到的：

import React, { Component } from 'react';

import {
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';

import MapView from 'react-native-maps';

const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

class MapComponent extends Component {
  constructor() {
    super()
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      var …

我正在尝试使用 react-native-maps 模块制作一个应用程序。我可以通过 navigator.geolocation.watchPosition 获取设备位置，并且我还使用内置于 showUserLocation 属性的地图。我怎样才能实现加载时地图会转到用户位置。没有看到整个世界，也没有硬编码的初始位置。

编辑：这是我的 react-native-map 元素。该区域设置为硬编码的初始位置，我想将其更改为始终加载到用户位置。

    <View style={styles.container}>
                    <MapView
                    style={styles.map}
                    region={this.state.initialPosition}
                    showsMyLocationButton={true}
                    loadingEnabled={true}
                    onRegionChange={(region)=> this.setState({ initialPosition:region })}
                    onLongPress={this.mapOnPress}
                    showsUserLocation={true}
                    > 

我在应用程序中使用的位置来自这里，但加载很晚，通常超过 20 秒，所以我想跳过这 20 秒并立即加载用户位置。

this.watchID= navigator.geolocation.watchPosition((position)=>{
    var lastRegion ={
                latitude: lat,
                longitude: lon,
                longitudeDelta: LON_D,
                latitudeDelta: LAT_D
            }
    this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10})

有什么解决办法吗？谢谢你的帮助 ：）

我想在地图中移动某个位置时更改我的初始区域，为此我使用了 onRegionChangeComplete 功能，但它一次调用两次或三次。

这是我的代码：

onRegionChangeComplete(region) {
    if(!this.state.initialRegionChange){
      console.log("changeRegion:"+JSON.stringify(region))
      var initialRegion = {
        latitude: region.latitude,
        longitude :region.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
      var lat = parseFloat(region.latitude)
      var lang = parseFloat(region.longitude)
    }else{
      this.setState({
        initialRegionChange:false
      })
    }
  }

render(){
  return(
    <MapView
          ref="map"
          style={styles.map}
          initialRegion={this.state.region}
          provider={MapView.PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          showsBuildings={true}
          showsUserLocation={true}
          showsTraffic={true}
          showsIndoors={true}
          />
    )
}

请给我建议如何解决这个问题。

非常感谢任何帮助。

这是我正在关注的模块链接。 https://github.com/react-community/react-native-maps

我想使用自定义标记图像而不是脉冲蓝点 - 有没有办法在使用用于 ios 的苹果地图和用于 Android 的谷歌地图的反应原生地图中自定义它？

我将如何实现用户必须使用两根手指使用 react-native-maps 平移地图的功能？看起来他们没有手势处理功能。我不一定需要一个完整的答案，只需要一些想法来为我指明正确的方向。除了基本的 onPress 之外，我也没有看到非常全面的手势库。

https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md

我在android上使用react-native-maps。我放置了一个自定义按钮，单击该按钮应转到提供的坐标（我当前的位置）

<MapView
          ref={(map) => { this.map = map; }}
          provider={PROVIDER_GOOGLE}
          style={{ height: '100%', width: '100%' }}
          annotations={markers} 
          showsUserLocation={true}
          showsMyLocationButton={true}
          initialRegion={this.state.region}
          onRegionChangeComplete={this.onRegionChange}
        >

我的按钮 -

<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
          width: 60, height: 60,
          position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
        }]}>
          <Image
            style={{ width: 40, height: 40 }}
            source={Images.myLocation}
          />
        </TouchableOpacity>

获取到我的位置方法 -

gotToMyLocation(){
    console.log('gotToMyLocation is called')
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        console.log("curent location: ", coords)
        console.log(this.map);
        if (this.map) {
          console.log("curent location: ", coords)
          this.map.animateToRegion({
            latitude: coords.latitude, …

我有一个使用位置权限的 React Native Expo 应用程序。它在我的设备和模拟器上运行良好，因此进入分发的下一步 - TestFlight。当我将 ipa 加载到 Testflight 然后尝试运行该应用程序时，该应用程序可以运行到我向用户请求权限的程度。（因此应用程序加载，身份验证有效，到我的服务器和数据库的链接都有效等）。

在代码请求用户位置权限时，通常的警报“使用应用程序时允许，始终允许，不允许”在屏幕上闪烁几毫秒，然后应用程序崩溃，我可以选择将评论分享给试飞。

请求许可的代码在这里：

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import createDataContext from '../../Context/createDataContext';

const deviceLocationReducer = (state, action) => {
  switch (action.type) {
    case 'get_device_location':
      return action.payload;
    default:
      return state;
  }
};

const getDeviceLocation = dispatch => async () => {
  let deviceLocation = null;
  try {
    // Ask User permission for location
    const { status } = await Permissions.askAsync(Permissions.LOCATION);
    console.log('\n***\nDeviceLocationContext.js: Permission status', status); …