标签: react-native-maps

我正在使用react-native-google-places-autocomplete来选择一个位置。我想提取选定的位置并在其他组件中使用它。

怎么保存地址

这是我的代码

import React, {Component} from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};

export default class google extends Component {
  render(){

  return (
    <View style={styles.container}>
      <View style={styles.top}>
    <GooglePlacesAutocomplete
      placeholder='Search'
      minLength={2} // minimum length of text to …

我试图在地图的中间和太多覆盖一些元素，但无济于事。到目前为止，我已经尝试使用文档中描述的“OverlayComponent”

render() {
  return (
    <MapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

这个组件似乎不再真正导出react-native-maps为

import MapView, { OverlayComponent } from 'react-native-maps';

为 产生未定义OverlayComponent。

有任何想法吗？我对如何处理这个问题有点不知所措。

我尝试View使用pointerEventsset to覆盖地图，none但我尝试覆盖的元素之一需要捕获输入，特别是它的 TextInput 我试图变成搜索栏。

谢谢你

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

在 ReactNative 应用程序上工作，我正在尝试编辑地图样式。

我正在按照“ https://github.com/react-native-community/react-native-maps ”上的说明进行操作。

对于 IOS，文档建议如下。

IE：

1) 添加 mapStyle = [从https://mapstyle.withgoogle.com/生成的 JSON ]。

2) 导入 PROVIDER_GOOGLE

3）添加“customMapStyle”和“provider”道具（见下文）

但是，即使我已经手动检查了 JSON（即颜色都是黑色和灰色，根据我想要的自定义地图）渲染的地图仍然以标准的蓝色和绿色出现？

奇怪的是，我的标记从大头针变成了一些看起来像安卓的大头针，所以发生了一些事情。

欢迎任何想法。

谢谢

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

MapStyle = [ ... ]

render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
      provider={PROVIDER_GOOGLE}
      customMapStyle={MapStyle}
    />
  );
}

我正在使用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上搜索了类似的问题，这个问题不重复

有什么方法可以知道用户是否在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 在浏览器中可以工作

安卓： 苹果系统：

我已经在 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

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