标签: react-native-maps

用例：使用 react-native MapView 组件在地图上显示注释。初始地图区域设置为所有注释都可见。注释正在移动，这会触发重新渲染。此外，用户应该能够在地图周围平移/缩放，因此onRegionChange()并onRegionChangeComplete()尝试捕获区域变化并将其设置为状态；通过这种方式，地图区域不会在发生重新渲染时重置为初始地图区域。

render: function() {
  ...
  return (
    <MapView
      region={this.state.region}
      annotations={annotations}
      onRegionChange={this.onRegionChange}
      onRegionChangeComplete={this.onRegionChangeComplete}
    />
  );
},

onRegionChange: function(region) {
  this.setState({ region });
},

onRegionChangeComplete: function(region) {
  this.setState({ region });
},

问题：由于更新状态的延迟，在状态中设置更新的区域不允许在地图上平滑平移/滚动体验。经过几次平移或缩放后，地图会冻结，大概是因为它使用的是保存在状态中的当前区域，而不是更新后的区域。等待 1-2 秒，地图可以再次平移/缩放，大概是因为该区域现在已经在状态中更新。

问题：有没有办法只设置 MapView 的初始区域，这样重新渲染不会导致该区域重置？这样，onRegionChange()并且onRegionChangeComplete()可以用作委托方法在新区域上执行工作（类似于 MKMapViewDelegate 的 mapView:regionWillChangeAnimated:），而不是为了地图渲染的目的而保存区域本身。

我的要求是，我需要在地图视图上显示标记。当用户单击地图视图上的任意位置时，还需要获取放置标记的坐标（纬度和经度）。

我在这里尝试的是：

class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      },
      marker: {
        latlng: {
          latitude: 17.6868,
          longitude: 83.2185,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }
      }
    };
  }
  onMapPress(e) {
    alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate));

    this.setState({
      marker: [
        {
          coordinate: e.nativeEvent.coordinate
        }
      ]
    });
  }

  handleMarkerPress(event) {
    const markerID = event.nativeEvent.identifier;
    alert(markerID);
  }

  render() {
    return (
      <MapView
        identifier={"1"}
        ref={component => (this.map = component)}
        provider={this.props.provider}
        style={styles.map}
        region={this.state.region}
        onPress={this.onMapPress.bind(this)}
        //onPress={(event) => …

当用户执行新搜索时，我需要删除我在组件上绘制的折线。现在我最终在同一张地图上绘制了 2+ 条路线，而不是只显示新路线的新搜索。

我按照本教程来渲染折线：https : //medium.com/@ali_oguzhan/react-native-maps-with-google-directions-api-bc716ed7a366。

我已经尝试在 componentWillUnmount 和 ComponentWillMount 中清空状态（它为折线提供要绘制的坐标）。我还看到了对 polyline.remove() 的引用，但据我所知，react-native-maps 或 mapbox/polyline 包不存在该功能。Mapbox 似乎有一种删除图层的方法，但是我找不到将其合并到我的项目中的方法。

我很感激有关如何删除折线的任何线索。

这是一些代码。JSX：

    <MapView style={styles.map} initialRegion={{
      latitude:startLat,
      longitude:startLng,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }}
    showsUserLocation={true}
    loadingEnabled={true}
    loadingIndicatorColor="#e6fef6"
    loadingBackgroundColor="#400230"
    >
    <MapView.Polyline
        coordinates={this.state.coords}
        strokeWidth={2}
        strokeColor="purple"/>

    </MapView>

解码折线：

      async getBikeDirections(startBike, endBike) {
try {
  let respBike = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${startBike}&destination=${endBike}&mode=bicycling`)

  let respJsonBike = await respBike.json()
  let completeBikeSteps = respJsonBike.routes[0].legs[0].steps
  let pointsBike = Polyline.decode(respJsonBike.routes[0].overview_polyline.points)

  let coordsBike = pointsBike.map((point, index) => {
    return {
      latitude: point[0],
      longitude: point[1]
    } …

我react-native-maps在react-native应用程序上使用了Airbnb 的精彩内容.

我在JSON文件上有一个标记列表,其中每个标记都有一个属性zoom,该属性是一个近似缩放级别的整数,标记应该在地图上显示/隐藏.

是否有基于a latitudeDelta和longitudeDeltaa的方法Region来获得当前缩放级别的近似双/整数,就像我们在Google地图上看到的那样(1到20)？

谢谢

我正在构建一个显示标记的地图,以显示附近商家的位置.我将'data'数组作为道具传递给地图.我设置了一个间隔,每隔两秒,我从我的API中获取更多商家,并且'数据'数组增长.

我正在获取componentWillReceiveProps中的数据.fetchData()将更多商家附加到数据阵列.

componentWillReceiveProps(nextProps) {
    if(nextProps.loading == false) {
        setTimeout(nextProps.fetchData,2000);
    }

在我的MapView组件中 -

{
    this.props.data.length > 0 && this.props.data.map(merchant => (
        <MapView.Marker
            coordinate={{latitude: Number(merchant.latitude), longitude: Number(merchant.longitude)}}
            title={merchant.name}
            description={merchant.address}
            identifier={"" + merchant.id}
            key={merchant.id}
        />
    ))
}

我的问题:每当我调用fetchData()时,都会呈现新的标记.但是,整个地图再次渲染.我不想要这种眨眼的行为.

我会非常感谢任何帮助/建议.提前致谢!

PS你可以在这里找到视觉

请删除此问题,有人在另一个主题上帮助了我.

我试图在我的应用程序中的某些时间生成标记,以便在启动时显示空白地图,但稍后,标记可以在某些时间显示并消失.

我的状态变量设置如下:

class Map extends Component {   

state = {
    markers: [{
        key: null,
        contactName: null,
        location: null,
    }]
}

我试图生成标记的代码如下:

renderMarker = ({ key, contactName, location }) => {
        console.log('renderMarker: ' + key + ', ' + contactName + ', ' + location);
        return this.state.markers.map(Marker => (
            <MapView.Marker  
                key = { key }
                coordinate = {{ 
                    latitude: location[0],
                    longitude: location[1]
                }}
                //image = { carIcon }
                title = { contactName } />
        ))
}

那里的console.log正在生成正确的数据,所以它返回例如:

renderMarker: 389djhJHDjdkh392sdk, Steve, …

React Native 在我的 android 设备上是空白的。它只是一个带有谷歌标志的灰色屏幕。与React-native-maps Blank page Only google logo 不同，它在模拟器上运行，但不在真实设备上运行。

我在网上搜索了这个问题：

• API应该没问题
• 样式表没问题
• 它正在开发 genymotion 模拟器

• 在 android 虚拟设备上工作

  完美地在 Expo 上工作，但当我从 Playstore 下载应用程序时就不行了。AndroidManifest.xml 中的元数据如下所示：

  这是 mapView 的样子：

   ` <MapView
            showsUserLocation={false}
            style={styles.map}
            provider='google'
            ref={ref => { map3 = ref; }}
            onMapReady = { this.onMapReady }
            initialRegion={this.state.region}
            >
              <Marker 
              image={logo}
              coordinate={this.state.coordinate}
              />
  </MapView>`
  

  Run Code Online (Sandbox Code Playgroud)

..和风格：

    `const styles = StyleSheet.create({
      mapContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
      },
      map: {
        flex: 1,
        borderRadius: 4,
        width,
        height,
        zIndex: …

我正在使用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 我试图变成搜索栏。

谢谢你

在 android 上使用 react-native-maps 渲染地图时，我偶尔会在 Firebase 顾问中遇到此错误。在渲染 MapView 之前，我检查了是否有纬度和经度。但是我在某处遗漏了一些东西。任何帮助是极大的赞赏。下面是我的 Map 组件的代码。

import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import Icon from 'react-native-vector-icons/MaterialIcons';

const renderMarker = ({withMarker, onPress}) =>{

  const { overlayStyle } = styles;
  if(withMarker){
    if(onPress){
      return (
        <TouchableOpacity
          onPress={onPress}
          style={overlayStyle}>
          <Icon
            pointerEvents="none"
            style={{
              marginBottom:32,
              width: 40,
                height:40
            }}
            allowFontScaling={false}
            color="#31cce5"
            name="place"
            size={44}
          />
        </TouchableOpacity>
      );
    }else{
      return(
        <View
          pointerEvents={"none"}
          style={overlayStyle}>
          <Icon
            pointerEvents="none"
            style={{
              marginBottom:32,
              width: …