标签: react-native-maps

在地图视图标记内显示一个按钮?

我目前正在使用airbnb 地图模块开发一个反应本机应用程序。

我的地图包含多个标记,我可以单击这些标记来打开组件MapView。它包含标题和描述。

我想为此添加一个按钮MapView,但是我发现的解决方案不起作用。我这样定制它(这是return我的谷歌地图组件的一部分:

return(
  <View style={styles.container}>

    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      customMapStyle={mapStyle}
      initialRegion={{
        latitude: 48.852968,
        longitude: 2.349902,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1
      }}
    >
      <MapView.Marker
        coordinate={{
          latitude: 48.852968,
          longitude: 2.349902
        }}
          title={ 'myTitle' }
          description={ 'myDescription' }
          pinColor={ 'blue' }
          onCalloutPress={() => alert('Clicked')}
      >
        <MapView.Callout>
          <View>
            <Text>Click Me!</Text>
          </View>
        </MapView.Callout>
      </MapView.Marker>

    </MapView>

  </View>
);
Run Code Online (Sandbox Code Playgroud)

我想要的: 1- 在地图上显示我的蓝色标记(使用纬度和经度) 2- 单击标记 3- 有一个带有标题、描述和“单击我!”的小弹出窗口 按钮 4-“点击”为console.log

相反会发生什么: 1- 在地图上显示我的蓝色标记(使用纬度和经度) 2- 单击标记 3- 出现一个小弹出窗口“单击我!” 按钮(更多的是蓝色链接,但我不知道它应该如何呈现)4-我的控制台中没有“单击”

此功能已被弃用吗?或者我做错了什么?我遵循了解决方案和文档,但也许我错过了一些东西。

react-native react-native-maps

1
推荐指数
1
解决办法
5209
查看次数

React-Native:获取react-native-maps的旋转角度

我正在构建一个用于跟踪驾驶员的用户界面,我更新了轨迹和方向...对于自定义标记,我使用了驾驶员航向值的变换和旋转,标记相对于航向的动画效果非常好,但是当我旋转地图时出现问题,旋转地图后标记不会沿着地图旋转,有什么可能的方法可以旋转地图并保持标记的旋转?

import React from 'react';
import { View, StyleSheet, Platform, Image } from 'react-native';
import MapView, { AnimatedRegion } from 'react-native-maps';
import { connect } from 'react-redux';
import { Card, Heading, Text, Button } from '@shoutem/ui';
import { Icon } from 'react-native-elements';
import { DARK } from '../../config';
import * as actions from '../../actions';
import { Loading } from '../../components/common';

const DEFAULT_PADDING = { top: 40, right: 40, bottom: 40, left: 40 };
const IUST = {
    latitude: 33.9260206, longitude: …
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-native-maps

1
推荐指数
1
解决办法
6533
查看次数

使用未声明的标识符“AIRGoogleMapOverlay”react-native-maps

我已经为 IOS https://github.com/react-community/react-native-maps/blob/master/docs/installation.md完成了与此链接中描述的完全相同的安装

但由于某种原因我收到这些错误:

  1. 使用未声明的标识符“AIRGoogleMapOverlay”
  2. 使用未声明的标识符“覆盖”
  3. 使用未声明的标识符“覆盖”

代码:#import“AIRGoogleMapOverlayManager.h”#import“AIRGoogleMapOverlay.h”

@interface AIRGoogleMapOverlayManager()

@end

@implementation AIRGoogleMapOverlayManager

RCT_EXPORT_MODULE()

(UIView *)view
{
  AIRGoogleMapOverlay *overlay = [AIRGoogleMapOverlay new];
  overlay.bridge = self.bridge;
  return overlay;
}

RCT_REMAP_VIEW_PROPERTY(bounds, boundsRect, NSArray)
RCT_REMAP_VIEW_PROPERTY(image, imageSrc, NSString)

@end
Run Code Online (Sandbox Code Playgroud)

react-native react-native-ios react-native-maps

1
推荐指数
1
解决办法
2532
查看次数

React-native-map 标记颜色没有改变

我想依次更改标记的颜色。当应用程序首次渲染时,标记的所有颜色都应为红色。一秒钟后,第一个标记(no-1)颜色要为蓝色。然后在一秒后,第一个标记颜色变为先前的状态颜色。但第二个标记(no-2)标记变为蓝色。

例如 - 我们有六个标记

In one-second - blue -red -red -red -red- red In two-second - red -blue - red -red -red -red In three-second - red -red -blue -red -red -red In four-second - red -red- red -blue -red -red In five-second - red -red- red -red -blue -red In six-second - red -red- red -red -red -blue

这是我的代码 - 活动状态正在改变,但标记的颜色没有改变。

import React from 'react';
import { View, Text, StyleSheet,Animated, Platform } from 'react- 
native';
import MapView, {AnimatedRegion,Polyline} from …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps reactjs react-native react-native-maps

1
推荐指数
1
解决办法
3069
查看次数

react-native-maps 标记抛出和 IndexOutofBoundsException:索引 1 无效,大小为 0

我正在尝试让 react-native-maps 标记显示在我的 Android 设备上(它在 iOS 上运行良好)但它向我抛出 IndexOutofBoundsException: Invalid index 1, size is 0 error at render time。

http://i.imgur.com/owletnw.png

render() {
    const INITIAL_REGION = { latitude: 52.221835, longitude: 21.000896, latitudeDelta: 0.0922, longitudeDelta: 0.0421 };
    return (
        <MapView ref="map"
            showsUserLocation = { true }
            loadingEnabled = { true }
            showsTraffic = { false }
            showsBuildings = { false }
            style = { styles.map, {flex: 1} }
            initialRegion = { INITIAL_REGION }
        >
            <View style={{flex: 0.1, flexDirection: 'row', position: 'absolute', justifyContent: 'space-between', …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-android react-native-maps

0
推荐指数
1
解决办法
1659
查看次数

React Native Map (Airbnb) + Markers 动画

我想为 React-native-maps {Google} 标记设置动画。

我尝试使用动画模块,但标记不允许复杂的样式。

是否有任何功能可以修改标记的坐标并为其设置动画?,例如:

marker.setAnimation(google.maps.Animation.BOUNCE);
Run Code Online (Sandbox Code Playgroud)

我试过:

<MapView.Marker.Animated>
Run Code Online (Sandbox Code Playgroud)

但我无法创建效果。是否有将坐标编辑为动画放置的功能?

animation google-maps markers react-native react-native-maps

0
推荐指数
1
解决办法
2415
查看次数

更改选项卡后是否重新加载屏幕?

我的项目中有2个标签-外部标签和内部标签。在我的内部标签中,我有地图和列表,其中显示了标记和详细信息。

现在,当我将选项卡从地图更改为列表或反之时,我想重新加载(获取数据)。我只能调用一次,即第一次访问,因为我一直在从组件Will Mount()调用API。如何识别标签的移动并重新加载地图?

任何线索将不胜感激

javascript reactjs react-native react-native-maps react-navigation

0
推荐指数
1
解决办法
2778
查看次数

在React Native Map上显示用户位置

如何在React Native Maps上显示用户位置

<MapView
    region={this.props.coordinate}
  >
    //My map markers
</MapView>
Run Code Online (Sandbox Code Playgroud)

react-native react-native-maps

0
推荐指数
1
解决办法
4335
查看次数

使地图视图适合圆形边界

我正在使用该react-native-maps库生成一个地图视图,其中包含一些标记和周围的圆圈,我希望能够调整地图视图以包含圆圈而不仅仅是地图上的标记。有人有这样的工作吗?

这是显示我当前设置的小吃react-native

https://snack.expo.io/@jordanr/fittoelements-issue

react-native react-native-maps

0
推荐指数
1
解决办法
1392
查看次数

如何使用搜索结果中的新区域更新 Mapview

在用户从 GoogleAutoComplete 搜索位置后,我希望 MapView 根据提供的数据(纬度、经度)显示或加载新区域。

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

我试过了onRegionChange,我没有找到合适的功能来实现这一点。这是我的地图视图

 <MapView
    provider={PROVIDER_GOOGLE} 
    style={style.map}
    region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
     }}
    >
</MapView>
Run Code Online (Sandbox Code Playgroud)

用户单击结果后,地图应移动到或显示该区域。

react-native react-native-maps

0
推荐指数
1
解决办法
675
查看次数

反应原生地图移动到坐标变化

在我的应用程序中,我有谷歌地图。它的实现如下所示。

<MapView style={[styles.mapStyle, { flex: 1, width: this.state.mapWidth }]}
                            initialRegion={{
                                latitude: this.state.latitude,
                                longitude: this.state.longitude,
                                latitudeDelta: 0.1,
                                longitudeDelta: 0.1,
                            }}
                            provider={PROVIDER_GOOGLE}
                            onPress={this.onMapPress.bind(this)}
                            showsUserLocation={true}
                            followsUserLocation={true}
                            showsMyLocationButton={true}
                            showsCompass={true}
                            showsTraffic={true}
                            toolbarEnabled={true}
                            onMapReady={() => this.setState({ width: width - 1 })}
                        >
                            <Marker draggable
                                coordinate={{
                                    latitude: this.state.latitude,
                                    longitude: this.state.longitude,
                                }}
                                onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
                            />
                            <Circle
                                center={{
                                    latitude: this.state.latitude,
                                    longitude: this.state.longitude,
                                }}
                                radius={this.state.radius}
                                fillColor='rgba(253, 48, 4,0.5)'
                                strokeColor='rgba(253, 48, 4,1)'
                            />
   </MapView>
Run Code Online (Sandbox Code Playgroud)

当我单击一个按钮时,我会更改地图区域的状态值。

changeRegion(){
    this.setState({ latitude: 6.86, longitude: 6.86 });
}
Run Code Online (Sandbox Code Playgroud)

这成功地改变了地图标记的位置。

我的问题是,地图没有移动到选定的位置。我怎样才能做到这一点?

react-native react-native-maps

0
推荐指数
1
解决办法
3161
查看次数

构建:找不到“Google-Maps-iOS-Utils/GMUHeatmapTileLayer.h”文件。反应本机

使用静态链接React-native-map产品GMUHeatmapTileLayer.h报错。我正在尝试创建 firebase 和地图应用程序,要使用 firebase 它需要 use_frameworks!:linkage => :static 使用它,地图不起作用并产生多个错误。

我按照这个问题stackoverflow 问题来解决航空地图问题。现在我有 GMUHeatmapTile.h 文件未找到错误。

不使用 use_frameworks!:linkage => :静态项目将成功构建。

ios react-native react-native-maps google-maps-ios-utils

0
推荐指数
1
解决办法
1682
查看次数