标签: react-native-maps

因此，我正在构建一个使用标记刷新 GPS 位置的应用程序。问题是初始区域不在标记附近并且会发生变化。

我有一个刷新 GPS 位置的按钮，有没有办法让地图转到标记处？

我在文档中没有看到任何说明这一点的内容。

<MapView
      style={styles.map}
      initialRegion={region}
      ref={_map}
      onRegionChangeComplete={region => {setRegion(region)}}
    >
      <Marker
        coordinate={{
          latitude: lat,
          longitude: long,
        }}
        key={lat}
        title="Location"
        style={{width: 26, height: 40}}
        description={address}
        resizeMode='contain'
      />
    </MapView>

当地图屏幕打开时，如何使地图居中以显示用户当前位置？按照expo文档，应该是用Expo Location API来实现吧？然而，文档并不清楚。我从世博会位置文档中获取了部分代码，并在我的地图屏幕中实现了它。那么，我应该如何将其集成到 MapView 中以执行 getCurrentPositionAsync 方法并在地图屏幕打开时相应地将地图居中呢？

import React, { useContext, useState, useEffect } from "react";
import MapView from "react-native-maps";
import styled from "styled-components";
import { Searchbar } from "react-native-paper";
import { View } from "react-native";

import * as Location from 'expo-location';

const Map = styled(MapView)`
height: 100%;
width: 100%;
`;

const SearchBarContainer= styled(View)`
padding: ${(props) => props.theme.space[3]};
position: absolute;
z-index: 999;
top: 20px;
width: 100%;
`;

export const MapScreen = ({navigation}) => {

  const [location, setLocation] = useState(null);
  const …

的颜色MapView.Marker似乎没有从默认的红颜色的变化，即使分配颜色后也pinColor。

有什么问题吗？

{ this.state.markers.map(marker => {
    return (
        <MapView.Marker 
            coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
            key={marker.key}
            pinColor='#000000'
        />
    )
})}

来自 Android 模拟器的屏幕截图

我正在开发一个使用 React-native-maps 的 React Native 应用程序，目前我坚持获取当前区域的左上角（纬度和经度）和右下角（纬度和经度）

<MapView.Animated
        onRegionChange={this.onRegionChange.bind(this)}
        showsUserLocation
        initialRegion={{
          latitude: coords.latitude,
          longitude: coords.longitude,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA,
        }}
        style={{ flex: 1 }}
      >
      <MapView.Marker
          coordinate={{ latitude: coords.latitude, longitude: coords.longitude }}
      >
      <MapView.Callout style={{ position: 'relative', width: 150}}>
        <PlaceCard />
      </MapView.Callout>
    </MapView.Marker>
</MapView.Animated>

知道如何得到它吗？！

我正在使用react-native-maps库来显示地图，但是如何突出显示像这个屏幕截图这样的区域？

我正在尝试在我的地图组件中移动一个按钮。我正在使用 react-native-maps

让我向你展示我的

render() {
console.log(this.state)
const { region } = this.state;
return (
  <View style={styles.container}>
    <MapView
      provider={this.props.provider}
      mapType="standard"
      style={styles.map}
      showsUserLocation={true}
      initialRegion={region}
    > 
      <UrlTile
        urlTemplate="XXX"
        zIndex={-1}
      />
      <Button style={{ borderWidth: 2, alignItems:'right',justifyContent:'right'}} title="Info" onPress={() => console.log("This is not fired")}/>
    </MapView>
    <View>
    </View>
  </View>
);
}
}


 const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    marginTop: 20,
    flex: 1,
  },
});

在这种情况下，我的按钮位于地图的中心/顶部，我想将其移动到地图的中心/右侧

任何的想法？谢谢

我正在使用顶部带有动画FlatList的React Native地图，当我按下地图标记时，我希望列表滚动到该特定索引。但是当我尝试这样做时，我得到了这个错误_this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined

我的代码基础看起来像这样...

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

export default Map extends component {

  scrollToCard = index => {
    this.flatListRef.scrollToIndex({index})
  }

  render() {

    const { allProperties } = this.props;

    <MapView
       ref={map => this.map = map}
       style={styles.map}
       initialRegion={{
          latitude: 35.2271,
          longitude: -80.8431,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.421
          }}
       >

       {allProperties && allProperties.map((property, index) => (
         <Marker
           coordinate={property.coordinates}
           title={property.propertyName}
           pinColor={theme.COLOR_GREEN}
           key={property.id}
           onPress={() => this.scrollToCard(index)}
         />
       ))}

       </MapView>

         {allProperties &&
            <AnimatedFlatList
               ref={ref => {this.flatListRef = ref }} …

从上面的图像中，我有2个视图，当按下棕色或绿色按钮时可以更改。因此，当默认情况下已选择棕色按钮时，地图中就会有一个标记。当我按下绿色按钮时，我希望删除地图的标记。

所以我尝试的是在按下绿色按钮时设置一个异步变量，并在Map组件中获取该异步变量。

借助Map组件中的异步变量，我将让Map知道隐藏标记。但是问题是如何重新呈现地图组件？

更新的问题

丹的解决方案为我工作。但是现在我有一个小问题。当我this.setState在下面使用时，componentWillMount它给了我警告。那么，根据接收到的道具的价值，我还可以使用其他什么方法来显示/隐藏我的标记呢？

if(this.props.isMarkerVisible) {
        this.setState({ showDots: true })
    }
    else {
        this.setState({ showDots: false })
    }

         { this.state.showDots === true &&
                <Marker
                    ref={(mark) => { this.marker = mark; }}
                    coordinate={{ latitude, longitude }}
                    pinColor={colors.primaryColor}
                    image={require('../../../../assets/circle.png')}
                />
            }  

            { this.state.showDots === false &&  null }    

我正在用 react native 开发一个 android 应用程序“Location Finder”，为此我安装了“react-native-maps”包。它正确显示了地图和位置，但现在我需要将指针放在我使用的位置上“”但它说“标记不存在于类型'typeof MapView'”

https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

我已按照上述 URL 安装和实现该功能。

import MapView from 'react-native-maps';

<MapView style={styles.map} region={props.userLocation}>
     <MapView.Marker />
</MapView>

“标记”应该可用，因为我从“react-native-maps”导入了“MapView”。但它给了我以下错误。
“'typeof MapView'.ts 类型上不存在属性 'Marker'”

我正在使用 react-native 0.61 并且有两个文件。正如您在下面看到的，我将位置从 FethcLocation.js 传递到 app.js 文件并将其分配为位置对象。然后我将其传递给 userMaps.js 文件并将其分配给经度和纬度值。但我收到一个错误说...

警告：失败的道具类型：提供给，预期region.latitude的类型的 道具无效。stringMapViewnumber

获取位置.js

import React from 'react';
import {View} from 'react-native';
navigator.geolocation = require('@react-native-community/geolocation');

class FetchLocation extends React.Component {
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.props.setLocation(position);
      },
      error => {
        console.log(error);
      },
      {enableHighAccuracy: false, timeout: 20000, maximumAge: 10000},
    );
  }

  render() {
    return <View></View>;
  }
}

export default FetchLocation;

应用程序.js

import React from 'react';
import {Button} from 'react-native';
import FetchLocation from './components/FetchLocation';
import UserMaps from …