标签: react-native-maps

我已经在 React Native/Expo 中构建了一个应用程序，该应用程序在开发中运行良好，但 Android 版本在生产中崩溃。打开后，会呈现闪屏，然后应用程序崩溃。

我尝试 expo start --no-dev --minify在生产中运行复制该应用程序，并且该应用程序运行良好。事实证明很难调试，因为实际上没有任何日志可供我检查，我发现的唯一有用的信息来自我的 google play 控制台，我在其中收到错误：

：com.google.android.gms.dynamite_mapsdynamite@230815033@23.08.15 (150300-0) - com.google.maps.api.android.lib6.drd.pa java.lang.RuntimeException

有谁知道这个错误意味着什么，或者有人对我如何调试这个有任何建议吗？

我正在使用react-native-maps处理一个小地图应用程序.我试图在地图上面渲染一个浮动动作按钮,但是当我看到它闪烁一秒钟时,一旦地图呈现,它就位于按钮顶部.我将在下面粘贴我的渲染代码和样式:

render() {
        return (
          <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
            <MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}>
              <MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}>
                <View style={styles.radius}>
                  <View style={styles.marker} />
                </View>
              </MapView.Marker>
            </MapView>

            <ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}>
              <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
              <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
              <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
            </ActionButton>
          </View>
        );
      }
    }

const styles = StyleSheet.create({
  container: {
    flex: 1, …

我正在使用react-native-navigation启动一个包含谷歌地图的单屏应用程序，使用 - react-native-maps和一个左抽屉：

导航：

Navigation.startSingleScreenApp({
        screen: {
            screen : 'map.MapScreen',
            title : 'Map',
            navigatorStyle: {
                navBarHidden: true
            }
        },
        drawer : {
            left : {
                screen : 'drawer.DrawerScreen',
                passProps: {}
            },
            disableOpenGesture: true
        },
        animationType: 'slide-down',
        passProps: {}
    })

地图屏幕：

export default class MapScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}>
                </MapView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center', …

我正在使用react-native-maps. 我使用<MapView.UrlTile/>和 最重要的是，我试图将<MapView.Polyline />. 然而，Polyline是不可见的。它奠定了通过URL Template。我可以这么说，因为当我缩放和捏合时，我会在渲染/加载地图的短时间内看到Polyline带有底层标准底图（在Android其 上google maps）的 。使用标记，不会发生此问题。

任何想法我如何获得Polyline最重要的URL Template？

我在 React Native Maps 库中遇到了一个奇怪的问题。在我正确遵循所有文档的那一刻，每次移动地图时，它似乎都会结巴并移回原始位置。或者偶尔它会移动到我想要的位置（口吃）

应用程序.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView from "react-native-maps";
import Geolocation from 'react-native-geolocation-service';
import {YellowBox} from 'react-native';

type Props = {};
export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: 53.41058,
                longitude: -2.97794,
                latitudeDelta: 0.1,
                longitudeDelta: 0,
            }
        }
    }

    componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                console.warn(position.coords.latitude);
                console.warn(position.coords.longitude);
                this.setState({
                    region: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0,
                    } …

latitude: 38.69444432847513
latitudeDelta: 0.1288559458782288
longitude: -90.5969550254043
longitudeDelta: 0.1638044205986091

假设我的地图区域具有上面的数据（我使用onRegionChange）

如何获得当前区域的距离（直径），以千米为单位？（由于手机处于纵向模式，因此宽度小于高度）

我可以做一个简单的转换吗？

我正在尝试MapView为 Android实现 React Native 。我确实遵循了github 安装说明，但是当我尝试使用react-native run-android命令运行时遇到了编译错误。

任务 :react-native-maps:compileDebugRenderscript FAILED

FAILURE：构建失败，出现异常。

• 出了什么问题：无法解析所有配置文件 ':react-native-maps:debugCompileClasspath'。无法解析 com.android.support:support-compat:26.1.0。要求：项目：react-native-maps 找不到满足版本约束的“com.android.support:support-compat”版本：依赖路径“MapViewDemo:react-native-maps:unspecified”--> 'com .facebook.react:react-native:0.59.0' --> 'com.android.support:appcompat-v7:28.0.0' - -> 'com.android.support:support-compat:28.0.0' 依赖路径 'MapViewDemo:react-native-maps:unspecified' --> 'com.facebook.react:react-native:0.59.0' --> 'com.android.support:appcompat-v7:28.0.0' - - > 'com.android.support:support-core-utils:28.0.0' --> 'com.

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

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

BUILD FAILED in 5s 8 个可操作的任务：8 个执行的错误无法在设备上安装应用程序，请阅读上面的错误以了解详细信息。确保您有一个正在运行的 Android 模拟器或已连接的设备并已设置您的 Android 开发环境： https ://facebook.github.io/react-native/docs/getting-started.html 错误命令失败：gradlew.bat app :安装调试

应用级gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

project.ext.react = [
    entryFile: "index.js"
] …

我正在使用react-native-maps，版本是"react-native-maps": "0.27.1".

我能够在2021 年 10 月 1 日星期五查看地图。

然而，今天（2021 年 10 月 4 日星期一）我收到带有 Google 徽标的空白地图，只有位置标记。

我尝试从react-native-maps（即google_maps_api.xml，PROVIDER_GOOGLE ）进行故障排除，但它没有解决问题。

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

class DeliveryRoute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: parseFloat(5.3302),
        longitude: parseFloat(103.1408),
        latitudeDelta: 0.002,
        longitudeDelta: …