标签: react-native-maps

在我的 React-Native 应用程序中，为 Android 构建时出现 lint 错误失败。我想忽略它，但添加推荐的脚本并不能解决问题，并且构建仍然失败

./gradlew build

* What went wrong:
Execution failed for task ':react-native-maps:lint'.
> Lint found errors in the project; aborting build.

  Fix the issues identified by lint, or add the following to your build script to proceed with errors:
  ...
  android {
      lintOptions {
          abortOnError false
      }
  }
  ...

并将推荐添加到app/build.gradle

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    compileOptions {...}
    defaultConfig {...}
    splits {...}
    signingConfigs {...}
    buildTypes {...}
    packagingOptions {...}

    lintOptions {
          abortOnError false
      }
}

我有一个带有标记的地图屏幕，我尝试将图像添加到标注中，并且使用<image source = .. /> 与在其他有效地方相同的方法，但在地图上它不会向我显示图片。

 {
        this.state.markers.map(marker => (
          
          <MapView.Marker
            key={marker.id}
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}>
              <MapView.Callout>
                <View>
                      <View>
                        {marker.imageUri && <Image source = {{uri: marker.imageUri}}
                        style = {{ width: '90%', height: 100, justifyContent: 'center', flex: 1, alignContent: 'center', resizeMode: 'stretch'}}
                      />  }        
                      </View>
                    <Text>Lat: {marker.latitude}, Lon: {marker.longitude}</Text>
                    <Text>{marker.email}</Text>
                </View>
              </MapView.Callout>         
          </MapView.Marker>
        ))
      }

它给了我一个空白视图而不是图像。我有做错什么吗？

我在地图（ react-native-maps ）上显示了一条路线（坐标数组）。我想检查路线的坐标是否在视口中以触发某些后续操作（或不触发）。

  const route = [
        {
            latitude: 41.38145,
            longitude: 2.17182,
        },
        {
            latitude: 41.38154,
            longitude: 2.17203,
        },
        {
            latitude: 41.38155,
            longitude: 2.17205,
        },
    ];

const MapDisplay = () => {
    const onRegionChange = (region) => {
     //searched function
        routeIsInViewport(region, route);
    };

    return <MapView onRegionChange={onRegionChange} />;
};

我正在 MapView 组件中实现我的自定义标记引脚。有没有办法隐藏或删除第三方标记，例如酒店、餐馆、销售商店等……？

我在组件文档中进行了搜索，但一无所获。

我正在使用 React Native Expo 构建一个混合应用程序。我的困难是我的应用程序需要地图并且需要在移动和网络上运行。为了使用 React Native 制作地图，我找到了几个库，但总是有一个问题：

• react-native-maps ：不支持网络。（https://github.com/react-native-maps/react-native-maps）
• @teovilla/react-native-web-maps ：使用 Webpack 配置，但我使用 Metro（以便能够使用 Expo Router）
• react-native-leaflet ：使用 Webview，因此不兼容 web
• MapBox SDK：不能与 Expo Go 一起使用（https://github.com/rnmapbox/maps/blob/main/plugin/install.md）

我尝试了所有这些库，但无法在网络中实现地图的渲染。

我的目标只是使用 Metro 在网络中使用 React Native Expo 的地图。也许我错过了一些东西，但我真的不知道如何显示地图。欢迎任何帮助。提前致谢。

我构建了一个本机应用程序，其中使用地图显示了某些位置。我已经在地图上的每个位置标记了图钉。现在我希望如果用户选择一个标记并单击导航按钮（我在地图上提供了），它应该启动苹果地图（适用于ios）和Google地图（适用于android），并显示从用户当前位置到纬度和经度的导航我已经输入了地图网址。

但是在苹果地图上，它始终显示“方向不可用”消息。

这是我如何调用地图网址进行导航的：

Platform.select({
      ios: () => {
             Linking.openURL('http://maps.apple.com/maps?daddr='+latitude+','+longitude+'&dirflg=d&t=m');
          
      },
      android: () => {
          Linking.openURL('http://maps.google.com/maps?daddr=' +latitude+ ',' +longitude);
      }
  })();

任何人都可以在这里帮助我。

谢谢

我刚开始使用 react native maps~0.22.1，我在获取可拖动标记 onDragend 新位置时遇到问题；我遵循了文档，尽管它有点迷糊，但结果未定义；

这是我的代码：

<Marker
        ref={(ref) => { this.marker = ref; }}
        draggable
        onDragEnd={(t, map, coords) => this.setDestination(coords)}
        coordinate={destination}
        position={destination}
        centerOffset={{ x: -18, y: -60 }}
        anchor={{ x: 0.69, y: 1 }}
        pinColor={COLOR.marker}
        onDragStart={() => this.setMarkerPosition()}
      />

setDestination 函数：

setDestination(coords) {
    const { destination } = this.props;
    const lat = coords.lat();
    const long = coords.lng();
    console.log('seperate:', lat, long);
    console.log('destina:', coords);
    this.props
      .dispatch($setDestination(coords.lat(), coords.lng()))
      .catch((error) => this.props.dispatch(Activity.$toast('failure', error.message)));

    this.setState((prevState) => ({
      isVisible: !prevState.isVisible,
      destination: destination[0].fullAddress,
    }));
  }

我有与谷歌一起运行的 IOS 和 Android 的 react-native 地图。有没有办法mapType在 react-native expo 应用程序中启用像谷歌地图应用程序那样的图层切换器？以便用户可以切换地图类型（标准、卫星、....）

代码的简化版本

constructor(props) {
  super(props);
  this.state = {
    mapRegion: null,
    markers: [],
    mapType: null
  };
}

switchMapType() {
  console.log('Changing');
  this.state.mapType = 'satellite'
}

render() {
  return (
    <MapView
      provider="google"
      mapType={this.state.mapType}
    >
      <Icon
        onPress={this.switchMapType} 
      />
    </MapView>
  );
}

在state 内部时出现未定义错误switchMapType()。

我花了大约5个小时来尝试使它与许多不同的代码排列一起使用，然后进行重建。我一生都无法将默认的“红色指针”标记更改为React Native Maps中的默认标记图像。

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

...

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    ref={ref => {this.map = ref;}}
    minZoomLevel={4}  // default => 0
    maxZoomLevel={10} // default => 20
    enableZoomControl={true}
    showsUserLocation = {true}
    showsMyLocationButton = {true}
    zoomEnabled = {true}
    initialRegion={{
        latitude: 37.600425,
        longitude: -122.385861,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }}
>
    <MapView.Marker
        coordinate={marker.location}
        image={require('./images/test.png')}        <------ HERE
        width={48}
        height={48}
    />
</MapView>

图像肯定存在于正确的文件夹中，我尝试了不同的图像格式png / gif / jpg / svg，尝试使用了{{uri:...}}和icon/image，添加和删除了width / height属性。似乎没有任何作用。我总是得到默认的红色指针。

我错过了明显的事情吗？

如果require映像不存在或类型不受支持，则项目打包程序/编译器将失败。它绝对可以看到图像，但是对此不做任何事情。在仿真器和实际设备上，结果相同。

image={require('./images/test.png')}

这条线什么也不做，好像它被某种方式忽略了一样。

显示地图我使用react-native-maps。我做了所有配置，但是当运行我的项目时，在控制台中收到以下消息：

允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需要。需要循环：node_modules\react-native-maps\lib\components\MapView.js -> node_modules\react-native-maps\lib\components\Geojson.js -> node_modules\react-native-maps\lib\components\MapView .js

我认为此消息会导致问题，并且不允许应用程序显示地图。我该如何解决这个问题？

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
    const App = () => {
      return (
        <View style={styles.container}>
          <MapView
            provider={PROVIDER_GOOGLE} // remove if not using Google Maps
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          >
          </MapView>
        </View>
      )
    }