标签: react-native-maps

我正在使用react-native-maps来渲染带有多个标记的 MapView。当用户单击标记时，我想执行一些操作和动画。为此，我将一个函数（例如，onMarkerPress）绑定到每个标记的 onPress。我遇到的问题是我不知道如何找出哪个标记触发了该功能。有没有办法获得对标记/识别键道具的引用？甚至坐标也可以，因为我可以使用它们来查找标记。

Android上的地图标记存在问题,似乎无法修复它.解决方法是点击地图标记3次,它将正确打开带有图像的标注/注释.

我怎么能以编程方式做到这一点？每次用户点击时,我想点击标记3次.

<MapView.Marker
  key={marker.key}
  coordinate={marker.latlng}
  title={marker.title}
  description={marker.description}
>
  <MapView.Callout style={styles.annotation}>
    <Image
      key={marker.key}
      source={{ uri: marker.image }}
      style={styles.thumbnail}
    />
  </MapView.Callout>
</MapView.Marker>

我无法安装 React Native React-Native-Maps，当我尝试使用 React-Native Run-Android 构建时出现此错误（我还没有在 iOS 上尝试过）：

配置项目“:app”时出现问题。无法解析配置“:app:_debugApk”的所有依赖项。未找到名称为“default”的配置。

我按照这里的说明进行操作：

https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md

当我跑步时：

react-native link

我得到：

rnpm-install info iOS module react-native-maps is already linked
rnpm-install info Android module react-native-geocoder is already linked
rnpm-install info iOS module react-native-geocoder is already linked

它似乎可以在 iOS 上工作，但不能在 Android 上工作，尽管对于地理编码器来说它可以工作（并且该服务工作正常）。

所以我按照手动说明进行了编辑（但我仍然收到上面的错误）：

android/app/build.gradle
android/settings.gradle
MainApplication.java
android\app\src\main\AndroidManifest.xml （已针对地理编码器进行了编辑）。

我确实对 build.gradle 中的版本号进行了一些操作：

// instructed in the installation guide -> build fail see above
compile project(':react-native-maps')
// Version 0.12.1 and earlier -> Build success but ERROR 500 in the …

region: new MapView.AnimatedRegion({
        longitude: 4.70821527747714,
        latitudeDelta: 1.384276459048536,
        latitude: 43.31340937725116,
        longitudeDelta: 2.066803805399701,
      });
....................
....................
this.state.region
    .timing({
      latitude: region.latitude._value,
      longitude: region.longitude._value,
      latitudeDelta: 0.5,
      longitudeDelta: 0.5,
    })
    .start();

this.setState({
  zoomLevel: 8,
  regionUpdated: true,
});

这就是我在react-native中使用的。

我想在动画结束后调用setState函数。但是现在，它在动画过程中被调用。

我认为如果动画功能是Promise功能会很棒。但我不确定。

我怎么解决这个问题？

如何在 React Native Maps 中设置最小和最大缩放级别

<MapView
    ref={(ref) => this.mapView = ref}
    clustering={true}
    clusterTextColor='#fff'
    style={styles.map}
    region={this.props.coordinate}
>
    //My map markers
</MapView>

我使用react-native-maps创建了地图。现在我需要在单击地图时以文本形式获取纬度和经度。

我尝试了这种方法，但出现错误“找不到变量：坐标”。

export default class Location extends Component {
  constructor(props) {
super(props);
this.state = {
  markers: []
};
this.handlePress = this.handlePress.bind(this);
  }
  handlePress(e) {
this.setState({
  markers: [
    ...this.state.markers,
    {
      coordinate: e.nativeEvent.coordinate,
      key: coordinate,
      color: randomColor()
    }
  ]
});
console.log(e.nativeEvent);
  }
  render() {
return (
  <MapView
    style={styles.map}
    initialRegion={{
      latitude: 7.8731,
      longitude: 80.7718,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }}
    onPress={e => this.handlePress(e)}
  >
    {this.state.markers.map(marker => (
      <Marker
        key={marker.key}
        coordinate={marker.coordinate}
        pinColor={marker.color}
      >
        <View style={styles.marker}>
          <Text style={styles.text}>{marker.coordinate}</Text>
        </View>
      </Marker>
    ))}
  </MapView>
);
  }
}

我如何修复它？

我收到以下错误

无法获得类型为org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHand的对象的未知属性'supportLibVersion'

我正在开发本机应用程序，并且本机映射依赖项在下面出现错误

 dependencies {
      def supportLibMajorVersion = supportLibVersion.split('\\.')[0] as int
      def appCompatLibName =  (supportLibMajorVersion < 20) ? "androidx.appcompat:appcompat" : "com.android.support:appcompat-v7"
      implementation "$appCompatLibName:$supportLibVersion"
      implementation('com.facebook.react:react-native:+') {
        exclude group: 'com.android.support'
      }
      implementation "com.google.android.gms:play-services-base:${safeExtGet('playServicesVersion', '16.1.0')}"
      implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '16.1.0')}"
      implementation 'com.google.maps.android:android-maps-utils:0.5'
    }

谁能知道这是怎么回事？

终端中的错误是

失败：构建失败，发生异常。

其中：
构建文件'D：\ react native \ abhishek \ Gwala \ node_modules \ react-native-maps \ lib \ android \ build.gradle'行：20

出了什么问题：
评估项目'：react-native-maps'时发生问题。
无法获得类型为org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler的对象的未知属性'supportLibVersion'。

第20行是

def supportLibMajorVersion = supportLibVersion.split('\\.')[0] as int

我正在使用带有 Hooks 的功能组件，我正在获取用户当前位置并将其分配给MapView initialRegion但组件不会重新渲染。

我尝试使用ref带有MapView组件的引用来调用，animateToRegion()但它不起作用。

有什么我想念的吗？

这是我的代码示例：

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Image, Platform, ScrollView, ActivityIndicator } from 'react-native';
import { DateMenu, Dropdown, DropdownTextInput, InputField} from '../../../GlobalReusableComponents/TextFields';
import { Space } from '../../../GlobalReusableComponents/Separators';
import { Button } from 'react-native-elements';
import axios from 'axios';
import MapView, { Marker } from 'react-native-maps';
import useReverseGeocoding from '../../../context/useReverseGeocoding';
import useCurrentLocation from '../../../context/useCurrentLocation';
import { getLocationAsync } from '../../../util/getCurrentLocation'; …

我根据 2 点之间的设定距离从后端（laravel）请求数据，latitude例如longitude。纬度 = 78.3232 且经度 = 65.3234 且距离 = 30 英里/公里，获取 30 英里内的行。

我遇到的问题是distance.

我正在使用react-native-maps，放大/缩小是基于latitudeDelta和longitudeDelta的，并且当用户放大/缩小以发送到后端并根据点和获取数据时，我不知道如何计算它们的半径/距离半径/距离

目前我在客户端有这个功能。确定当用户更改区域时何时获取新数据。但它有一个硬编码的问题distance（5.0 KM）

const _onRegionChangeComplete = (onCompletedregion: Region) => {
    if (initialRegion) {
      const KMDistance = helper.distance(         
        initialRegion?.latitude,
        initialRegion?.longitude,
        onCompletedregion.latitude,
        onCompletedregion.longitude,
        "K"
      );

      if (KMDistance > 5.0) {
        props.getNearByReports({   // request backend if distance difference more than 5 kilometers
          latitude: onCompletedregion.latitude,
          longitude: onCompletedregion.longitude
        });
      }
    }
  };

helper.distance // 获取初始点与用户更改区域后的距离差

function …

当我按下应用程序上卡片的 X 按钮时，我当前正在尝试关闭标注。

我的代码是这样的。** 封卡功能 **

  unsetCard = id => {
    this.setState({
      ...this.state,
      showCard: false,
    });

    this.markers.hideCallout();

    if (this.state.keyboard) {
      Keyboard.dismiss();
    }
  };

这是我的 ** 地图视图代码，我使用 RN 聚类 **

<MapView
            // 
            mapRef={ref => (this.myMapRef = ref)}
            //
            onPress={this.unsetCard}>
            {this.props.data.map(marker => (
              <Marker
                key={marker.id}
                ref={ref => (this.markers = ref)}
               //
               }>
                <Callout
                  //
                  }}>
                  <CustomCallout title={marker.t} />
                </Callout>
              </Marker>
            ))}
          </MapView>

最后在同一文件中的该组件中调用取消设置卡的函数：

            <CustomCardWithImage
              close={() => this.unsetCard(this.state.cardInfo.id)}
            />

如果有人告诉我如何使用标记的引用，我将不胜感激，因为尽管我尝试过，但它不起作用。

提前致谢，