我目前正在使用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-我的控制台中没有“单击”
此功能已被弃用吗?或者我做错了什么?我遵循了解决方案和文档,但也许我错过了一些东西。
我正在构建一个用于跟踪驾驶员的用户界面,我更新了轨迹和方向...对于自定义标记,我使用了驾驶员航向值的变换和旋转,标记相对于航向的动画效果非常好,但是当我旋转地图时出现问题,旋转地图后标记不会沿着地图旋转,有什么可能的方法可以旋转地图并保持标记的旋转?
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) 我已经为 IOS https://github.com/react-community/react-native-maps/blob/master/docs/installation.md完成了与此链接中描述的完全相同的安装
但由于某种原因我收到这些错误:
代码:#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) 我想依次更改标记的颜色。当应用程序首次渲染时,标记的所有颜色都应为红色。一秒钟后,第一个标记(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
我正在尝试让 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-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
我的项目中有2个标签-外部标签和内部标签。在我的内部标签中,我有地图和列表,其中显示了标记和详细信息。
现在,当我将选项卡从地图更改为列表或反之时,我想重新加载(获取数据)。我只能调用一次,即第一次访问,因为我一直在从组件Will Mount()调用API。如何识别标签的移动并重新加载地图?
任何线索将不胜感激
javascript reactjs react-native react-native-maps react-navigation
如何在React Native Maps上显示用户位置
<MapView
region={this.props.coordinate}
>
//My map markers
</MapView>
Run Code Online (Sandbox Code Playgroud) 我正在使用该react-native-maps库生成一个地图视图,其中包含一些标记和周围的圆圈,我希望能够调整地图视图以包含圆圈而不仅仅是地图上的标记。有人有这样的工作吗?
这是显示我当前设置的小吃react-native
在用户从 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)
用户单击结果后,地图应移动到或显示该区域。
在我的应用程序中,我有谷歌地图。它的实现如下所示。
<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-map产品GMUHeatmapTileLayer.h报错。我正在尝试创建 firebase 和地图应用程序,要使用 firebase 它需要 use_frameworks!:linkage => :static 使用它,地图不起作用并产生多个错误。
我按照这个问题stackoverflow 问题来解决航空地图问题。现在我有 GMUHeatmapTile.h 文件未找到错误。
不使用 use_frameworks!:linkage => :静态项目将成功构建。