标签: react-native-maps

React-Native-Maps当我点击它们时,我使用和我的地图标记引脚相互重叠,我可以选择想要的那个吗？

我已将此库用于Web端.

我似乎无法使用pod安装将react-native-maps安装到我的react本机ios项目中.我收到警告Missing dependency target "React"和React/RCTView.h' file not found错误

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

我认为这是因为use_frameworks!pod文件中的标志.有没有合理的解决方法？

这是我的pod文件

platform :ios, '11.0'
target 'MyCoolApp' do
  use_frameworks!
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'
  # Required by RNFirebase
  pod 'Firebase/Core'
  pod 'Firebase/Auth'
  pod 'Firebase/Firestore'
  pod 'Firebase/Messaging'
  pod 'Fabric', '~> 1.7.5'
  pod 'Crashlytics', '~> 3.10.1'
  pod 'Firebase/Database'
  pod 'Firebase/RemoteConfig'
  pod 'Firebase/Storage'
  pod 'Firebase/Performance'
  pod 'Firebase/DynamicLinks'

  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [ …

我一直在尝试遵循这个https://github.com/airbnb/react-native-maps教程，我尝试了他们所说的所有内容，但在我的 android studio 模拟器上出现了空白屏幕。

我的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import MapView from 'react-native-maps';

export default class ReactNativeMaps extends Component {
  render() {
   const { region } = this.props;
   console.log(region);

   return (
     <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 39.1329,
           longitude: 84.5150,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
   );
 }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0, …

我正在尝试创建一个加载谷歌地图的简单应用程序(使用airbnb的react-native-maps库)并显示用户的当前位置.我所看到的是,一旦获得用户的位置,地图总是显示默认的初始位置而不是重新渲染.

我正在使用React 0.42并仅在iOS上进行测试.以下是一些澄清的代码:

1.)我设置了一个初始状态

state = {
      region: {
        latitude: 52,
        longitude: 5,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      }
  }

2.)我在componentDidMount中获取用户的位置

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.01,
            longitudeDelta: 0.0011
          }
        });
      },
      (error) => alert(JSON.stringify(error)),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
  }

3.)使用渲染,我显示具有初始区域的地图,并期望一旦获取用户的位置就改变该区域

render() {
    return (
     <View style={{ flex: 1 }}>
       <View style={{backgroundColor: 'coral', height: 70, justifyContent: 'center', alignItems: 'center'}}>
         <Text>
            <Text>longitude: {this.state.region.longitude}</Text>
            <Text>latitude: {this.state.region.latitude}</Text>
        </Text>
       </View>
       <View style={styles.container}>
         <MapView …

最近我一直对此感到困惑,我希望根据是否选择/激活地图标记来动态更新地图标记图像(每个MapMarker都有一个类别引用活动图像或默认图像来自两个图像集合:interestIcons和interestIconsSelected.基本上我有一个MapMarkers集合,它们通过map标记集合进行映射.每个MapMarker都是MapView.Marker的子组件.

我想将所有MapMarkers渲染为默认的非选择/非活动状态,其中包含来自interestIcons的默认图像,当选中时,MapMarker图像应该从interestIconsSelected更改为活动图像,当选择另一个MapMarker时,之前选择的应该是恢复为默认图像,新的应更改为所选图像.

目前,我能够使用默认图像渲染地图标记,但是当选择地图标记时,图像似乎不会立即更改,除非您再次缩小/放大,即导致某种重新渲染,我想这样点击MapMarker会立即导致图像更新.

MapScreen.js: 通过地图渲染所有MapView.Marker MapMarkers的MapView.

        <MapView
            ref={map => { this._map = map }}
            style={Styles.Map.map}
            initialRegion={this.props.region}
            onRegionChange={this.handleRegionChange}
        >
            {
                this.props.events
                    .filter(this.eventFilterTimeNearFuture)
                    .filter(this.eventFilterTimeNotPast)
                    .filter(this.eventFilterDistance)
                    .filter(this.eventFilterInterest)
                    .map(e =>
                        <MapView.Marker
                            key={e.id}
                            onPress={() => this.handleLocationPush(e)} // Set selected event state
                            coordinate={e.location}
                        >
                            <MapMarker
                                event={e}
                                size={this.state.markerSize}
                                selected={this.state.selectedEvent} // The selected event set by state call.
                            />
                        </MapView.Marker>
                    )
            }
            { !this.props.regionMock &&
                <MapView.Marker
                    key={'userLocation'}
                    coordinate={this.props.region}
                >
                    <MapMarker size={'user'} />
                </MapView.Marker>
            }
        </MapView>

MapMarker.js

import {interestIcons, interestColors, interestIconsSelected} from "../../utils/Icons";

import {Styles} from '../../StyleProvider';

class MapMarker …

可能是有人在问这个问题，我一直在Github上找，但是找不到适合安装React Native Maps的解决方案...

不变违规：requireNativeComponent：在UIManager中找不到“ AIRMap”。

此错误位于AIRMap中（位于MapView.js：760）和MapView中（位于Home.js：118）。

  "react-native": "^0.57.0-rc.4",
  "react-native-maps": "^0.21.0",

我试过了：

rm -rf ios android node_modules
npm install
react-native upgrade
react-native link

libAirMaps.a is added in Build Phases
AirGoogleMaps and AirMaps is added to Libraries

遵循本指南，以在不使用CocoaPods的情况下手动添加iOS版Maps SDK：https：//developers.google.com/maps/documentation/ios-sdk/start

新增@import GoogleMaps;和[GMSServices provideAPIKey:@"_YOUR_API_KEY_"];到AppDelegate.m

仍然出现相同的错误...

我尚未将其添加到package.json中，因为我不确定它要求的路径是什么？我在https://github.com/react-community/react-native-maps/blob/master/docs/installation.md找到了

{
  "name": "your-app",
  "scripts": {
    "postinstall": "./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL"
  }
}

我尝试在 iOS 上使用谷歌地图，但收到此错误：

react-native-maps：必须将 AirGoogleMaps 目录添加到您的 xCode 项目中才能支持 iOS 上的 GoogleMaps。

错误图像

我正在使用react-native.maps https://github.com/react-community/react-native-maps

我按照安装说明进行操作，在 Android 中完美运行，但在 IOS 中却不行

macOS：10.14.1 (18B75)

dependencies {

"react": "16.5.0",

"react-native": "0.57.1",

"react-native-maps": "^0.22.1",

}

所以我试图让原生地图在世博应用程序中工作，文档页面说“世博应用程序中不需要设置”

https://docs.expo.io/versions/latest/sdk/map-view/?redirected

但是在使用 expo 安装库后，它不起作用。

我有两个关于为什么它不起作用的基本问题：

1. 你把谷歌控制台的 API 密钥放在哪里？
2. 你如何启用谷歌地图与控制台上的世博应用程序一起工作，启用android sdk？

我在地图上加载了大约 2000 个标记。它在前几秒钟工作正常，但随后急剧减速。要修复它，我需要清除应用程序数据，然后它只能像以前一样工作几秒钟。

const mapMarkers = [
    {id: 1, code: "603778", lat: 35.761791, lng: 51.389438},
    {id: 2, code: "788621", lat: 35.712278, lng: 51.361785},
    {id: 3, code: "129667", lat: 35.674757, lng: 51.485328},
    {id: 4, code: "999646", lat: 35.772885, lng: 51.446735},
    {id: 5, code: "111524", lat: 35.755656, lng: 51.446774},
    //...
];

let markers = mapMarkers.map(marker => {
    return (<Marker
        key={marker.code}
        coordinate={{latitude: marker.lat, longitude: marker.lng}}
        image={require('./images/markers.png')}
        onPress={() => console.log("pressed")}
    />)
});

我测试了emulator并且physical device两者都有问题。

提示：我将react-native-map-clustering包用于标记集群。

调用 Geolocation.getCurrentPosition() 时，react-native-geolocation-service(^5.3.1) 会引发此错误或应用程序崩溃。添加react-native-maps(^1.8.0) 库后，错误开始出现。之前工作得很好。经过大量搜索后，我在某个地方看到这可能是由于其他模块的播放服务版本不匹配造成的。

反应本机版本 - 0.72.3

在我的 android/build.gradle > googlePlayServicesVersion = "17.0.0"

当我更改googlePlayServicesVersion版本时，构建失败并显示以下消息：`* 出了什么问题：无法确定任务'：react-native-device-info：compileDebugAidl'的依赖关系。

无法解析配置“：react-native-device-info：debugCompileClasspath”的所有任务依赖项。找不到 com.google.android.gms:play-services-iid:18.0.0。需要者：项目：react-native-device-info

• 尝试：

使用 --stacktrace 选项运行以获取堆栈跟踪。使用 --info 或 --debug 选项运行以获得更多日志输出。使用 --scan 运行以获得完整的见解。

• 在https://help.gradle.org获取更多帮助

BUILD FAILED in 9s 错误 无法安装应用程序。命令失败，退出代码 1： ./gradlew app:installDebug -PreactNativeDevServerPort=8081 失败：构建失败并出现异常。* 出了什么问题：无法确定任务 ':react-native-device-info:compileDebugAidl' 的依赖关系。

无法解析配置“：react-native-device-info：debugCompileClasspath”的所有任务依赖项。> 找不到 com.google.android.gms:play-services-iid:18.0.0。需要者：项目：react-native-device-info`

尝试过 - 将 googlePlayServicesVersion 提高到 17.+/18.0.0/20.0.0。

implementation (project(path: ':react-native-device-info')) { exclude group: 'com.google.android.gms', module: 'play-services' } 在 android>app>build.gradle 中添加了上面的行