标签: react-native-maps

我刚刚从react-native-map 复制了具有动画API 的MapView。它可以工作，但在 Android 设备（三星）中性能太慢。有人经历过吗？怎么解决呢？

观看此处的视频

PS我不需要地图顶部的组件向上移动，所以我删除了变换Y。保留与否对性能没有影响。该应用程序在一段时间后挂起。

代码：

import React from 'react';
import {
  StyleSheet,
  View,
  Dimensions,
  Animated,
} from 'react-native';

import {
  ProviderPropType,
  Animated as AnimatedMap,
  AnimatedRegion,
  Marker,
} from 'react-native-maps';
import PanController from './PanController';
import PriceMarker from './AnimatedPriceMarker';

const screen = Dimensions.get('window');

const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const ITEM_SPACING = 10;
const ITEM_PREVIEW = 10;
const ITEM_WIDTH = …

showMyLocationButton 选项在 iOS 上不起作用。最初，该按钮在 Android 上也没有显示，但在实施 github issues 中建议的 hack（强制重新渲染）后，我让它显示出来。

如何在 iOS 上显示该按钮？我应该制作自己的按钮吗？

<MapView
  style={styles.map, { flex: 1, marginBottom: this.state.marginBottom }}
  onMapReady={this._onMapReady}
  initialRegion={initialRegion}
  showsUserLocation={true}
  //onPanDrag={e => console.log(e.nativeEvent)}
  followsUserLocation={true}
  showsMyLocationButton={true}
 >

反应本机地图：0.21.0

反应：16.4.1

我正在使用react-native-maps并且效果很好。但我有两个问题。

1. 我可以使用 自动跟踪用户位置，followsUserLocation但是当我移动地图时，它不断将我拖回用户位置。我怎么能解决这个问题？

2. 我想要刷新按钮，当用户按下按钮时，我希望我的地图视图跟随用户位置。

   constructor() {
       super();
       this.state = {
           followsUserLocation: true,
       };
   }
   
   
   mapView() {
       return(
           <MapView style={styles.map}
           showsUserLocation
           followsUserLocation={this.state.followsUserLocation}
           initialRegion={{
           latitude: 37.523814,
           longitude:  126.927494,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421}}/>
      )
   }
   

   Run Code Online (Sandbox Code Playgroud)

任何意见或建议将不胜感激！提前致谢！

我正在使用带有 expo 的react-native-maps库来为 android 和 ios 呈现谷歌地图。在某些时候，我需要以第一人称视图模式渲染地图，如下所示：
我已经阅读了 react-native-maps 文档并搜索了 github 和 stackoverflow 问题以获得答案，但找不到任何答案。

我可以使用这个库来实现这一目标吗？

编辑：

经过多次研究，我发现#1544允许我们旋转地图、更改视角等。

但是有一个小问题，函数animateToBearing和animateToViewingAngle仍然可以正常工作，但它们已被弃用。新功能animateCamera导致我遇到另一个问题

我正在使用react-native-maps库在react-native应用程序中显示谷歌地图。我正在跟踪用户移动，并希望在位置发生更改时旋转地图。对于地图旋转，我正在计算旋转角度并使用 animateCamera尝试旋转地图，如下所示：

this.map.animateCamera({
    heading: rotation,
    center: {latitude: currentLocation.latitude, longitude: currentLocation.longitude},
    pitch: this.state.currentAngle
}, {duration: 1000});

我已经查过了，但rotation, latitude, longitude, currentAngle没有null or empty objects

但这个方法会抛出这样的错误：

之后，我尝试使用animateToBearing方法，正如文档所述，该方法已被弃用，但效果很好并旋转地图，但显示弃用警告。

Versions:
    expo: 32.0.0,
    expo-cli: 2.2.0,
    react-native-maps: 0.23.0

有什么解决办法吗？

PS我在github.com和stackoverflow.com上搜索了类似的问题，这个问题不重复

我一直在尝试使用 MapView 上的方法为区域设置动画，为此我需要访问 ref 但它未定义。其他一切都正常工作，我只是无法获得参考，并且任何时候我尝试调用一个方法，例如`

this.map.animateToRegion({
  latitude: 0,
  longitude: 0,
  latitudeDelta: 1,
  longitudeDelta: 1
});

我收到一条错误消息：

无法读取未定义的属性“animateToRegion”

<MapView
  ref={r => this.map = r}
  mapPadding={{ top: 0, left: 0, right: 0, bottom: 400 }}
  provider='google'
  style={{ flex: 1 }}
  region={this.region}
>
  {this.renderBarberMarkers()}
</MapView>

有什么方法可以知道用户是否在react-native-maps中放大或缩小地图？

如何获取缩放级别或更新的 latitudeDelta？

我用来react-native-maps显示我所在地区火车站的标记。每个标记都有一个标注，其中包含接近列车的实时数据。

问题是；对于地图上的每个标记，每个标注都会在后台渲染。此外，当我从实时 API 获得新数据时，每个标注都会被重新渲染。即使我只需要按下的标记的标注，这也会导致呈现数百个视图。应用程序截图

有没有办法确保在用户按下特定标记之前不会渲染标注？新闻发布后；我还想确保仅渲染和显示特定标记的标注。

我的代码：

地图屏幕：

const MapScreen = props => {
  // get user location from Redux store
  // this is used to center the map
  const { latitude, longitude } = useSelector(state => state.location.coords)

  // The MapView and Markers are static
  // We only need to update Marker callouts after fetching data
  return(
    <SafeAreaView style={{flex: 1}}>
    <MapView
        style={{flex: 1}}
        initialRegion={{
          latitude:  parseFloat(latitude) || 37.792874,
          longitude: parseFloat(longitude) || -122.39703,
          latitudeDelta: 0.06,
          longitudeDelta: 0.06
        }}
        provider={"google"} …

我找不到一种方法让 iOS RN 地图从缩放级别 0 开始或缩小到 0。

const allowScaling = false;

const region = {
  latitude: 0,
  longitude: 0,
  latitudeDelta: 170,
  longitudeDelta: 180,
};

return (
  <View
    style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden',
    }}
  >
    <MapView
      ref={this.setRef}
      onPress={this.onPress}
      onLongPress={this.onLongPress}
      style={{ width: '100%', height: '100%' }}
      zoomControlEnabled
      provider={Platform.OS === 'ios' ? 'google' : 'osmdroid'}
      moveOnMarkerPress={false}
      customMapStyle={[
        {
          stylers: [
            {
              visibility: 'off',
            },
          ],
        },
      ]}
      rotateEnabled={false}
      scrollEnabled={allowScaling}
      pitchEnabled={allowScaling}
      zoomTapEnabled={allowScaling}
      zoomEnabled={allowScaling}
      cacheEnabled={false}
      initialRegion={region}
      onRegionChangeComplete={this.onRegionChange}
      maxZoomLevel={Platform.OS === 'ios' ? …

此代码适用于 IOS，但不适用于 Android（模拟器/真实设备）

<MapView region={this.state.region}>
  <UrlTile
    urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
    maximumZ={19}
    zIndex={99}
  />
</MapView>

不明白问题出在哪里

UrlTile可以正常使用此 url http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg，但不能使用osmurl，http://c.tile.openstreetmap.org/{z}/{x}/{y}.png尽管osmurl 在浏览器中可以工作

安卓： 苹果系统：