标签: react-native-maps

我正在尝试使用 react-native-maps 模块制作一个应用程序。我可以通过 navigator.geolocation.watchPosition 获取设备位置，并且我还使用内置于 showUserLocation 属性的地图。我怎样才能实现加载时地图会转到用户位置。没有看到整个世界，也没有硬编码的初始位置。

编辑：这是我的 react-native-map 元素。该区域设置为硬编码的初始位置，我想将其更改为始终加载到用户位置。

    <View style={styles.container}>
                    <MapView
                    style={styles.map}
                    region={this.state.initialPosition}
                    showsMyLocationButton={true}
                    loadingEnabled={true}
                    onRegionChange={(region)=> this.setState({ initialPosition:region })}
                    onLongPress={this.mapOnPress}
                    showsUserLocation={true}
                    > 

我在应用程序中使用的位置来自这里，但加载很晚，通常超过 20 秒，所以我想跳过这 20 秒并立即加载用户位置。

this.watchID= navigator.geolocation.watchPosition((position)=>{
    var lastRegion ={
                latitude: lat,
                longitude: lon,
                longitudeDelta: LON_D,
                latitudeDelta: LAT_D
            }
    this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10})

有什么解决办法吗？谢谢你的帮助 ：）

我想在地图中移动某个位置时更改我的初始区域，为此我使用了 onRegionChangeComplete 功能，但它一次调用两次或三次。

这是我的代码：

onRegionChangeComplete(region) {
    if(!this.state.initialRegionChange){
      console.log("changeRegion:"+JSON.stringify(region))
      var initialRegion = {
        latitude: region.latitude,
        longitude :region.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
      var lat = parseFloat(region.latitude)
      var lang = parseFloat(region.longitude)
    }else{
      this.setState({
        initialRegionChange:false
      })
    }
  }

render(){
  return(
    <MapView
          ref="map"
          style={styles.map}
          initialRegion={this.state.region}
          provider={MapView.PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          showsBuildings={true}
          showsUserLocation={true}
          showsTraffic={true}
          showsIndoors={true}
          />
    )
}

请给我建议如何解决这个问题。

非常感谢任何帮助。

这是我正在关注的模块链接。 https://github.com/react-community/react-native-maps

我想使用自定义标记图像而不是脉冲蓝点 - 有没有办法在使用用于 ios 的苹果地图和用于 Android 的谷歌地图的反应原生地图中自定义它？

我将如何实现用户必须使用两根手指使用 react-native-maps 平移地图的功能？看起来他们没有手势处理功能。我不一定需要一个完整的答案，只需要一些想法来为我指明正确的方向。除了基本的 onPress 之外，我也没有看到非常全面的手势库。

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

我无法在自定义标记标注中显示图像（来自资产和网络）：标注中的图像始终显示为空白矩形。

class CustomCalloutView extends React.Component {

    render() {
        return (

            <View>
                <View>
                    <Text style={{
                        fontWeight: "bold",
                    }}>
                        Test
                </Text>
                </View>
                <View>
                    <Image
                        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                        style={{ width: 100, height: 100 }}
                    />
                </View>
            </View>

        )
    }
}

主要的 Map 组件是：

<MapView
    style={{ flex: 1 }}
    initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}>
    {this.state.markers.map(marker => (
        <Marker
            key={marker.id}
            coordinate={marker.latlng}>
            <Callout>
                <CustomCalloutView />
            </Callout>
        </Marker>
    ))}
</MapView>);

标记正确显示，标注呈现，但图像未显示。如果我在普通视图中使用相同的图像。

我正在使用 expo (expo.io) 但也尝试了模拟器并在设备上安装了 APK（android；没有关于 ios 的信息）。

我在android上使用react-native-maps。我放置了一个自定义按钮，单击该按钮应转到提供的坐标（我当前的位置）

<MapView
          ref={(map) => { this.map = map; }}
          provider={PROVIDER_GOOGLE}
          style={{ height: '100%', width: '100%' }}
          annotations={markers} 
          showsUserLocation={true}
          showsMyLocationButton={true}
          initialRegion={this.state.region}
          onRegionChangeComplete={this.onRegionChange}
        >

我的按钮 -

<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
          width: 60, height: 60,
          position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
        }]}>
          <Image
            style={{ width: 40, height: 40 }}
            source={Images.myLocation}
          />
        </TouchableOpacity>

获取到我的位置方法 -

gotToMyLocation(){
    console.log('gotToMyLocation is called')
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        console.log("curent location: ", coords)
        console.log(this.map);
        if (this.map) {
          console.log("curent location: ", coords)
          this.map.animateToRegion({
            latitude: coords.latitude, …

世博版本：sdk42 react-native-maps：0.28和0.27.1都使用react-native-maps-directions这里是代码

   <MapView
    provider={PROVIDER_GOOGLE} // remove if not using Google Maps
    style={styles.map}
    region={getMapRegion()}
  >
    <MapViewDirections
      origin={origin}
      destination={destination}
      apikey={GOOGLE_MAPS_APIKEY}
      strokeWidth={3}
      strokeColor="blue"
    />

    <Marker
      coordinate={getMapRegion()}
      title="Test Title"
      description="This is the test description"
    >
      <Callout tooltip>
        <Text>{text}</Text>
      </Callout>
    </Marker>
  </MapView>

当用户执行新搜索时，我需要删除我在组件上绘制的折线。现在我最终在同一张地图上绘制了 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 在我的 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 应用程序。我正在尝试使用 react-native-maps 中的 MapView，但遇到此错误：“尝试导入错误：'requireNativeComponent' 未从 'react-native-web/dist/index' 导出。” 我正在网络视图中查看我的应用程序（如果这很重要）。我已经安装并链接了 react-native-maps。这是我当前的代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import { requireNativeComponent } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

和错误：

C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' …