React Native 地图：属性“showsPointsOfInterest”、“showsIndoors”和“showsBuildings”不起作用

Question

即使我明确地将 showsPointsOfInterest、showsIndoors 和 showsBuildings 设置为 false - 尝试字符串 "false" 和布尔值 false - 我的 MapView 在 React Native 中呈现各种附加信息。我希望地图整洁并且适合用户。这是我的 MapsContainer:

import React, { Component } from "react";
import MapView, { Marker } from "react-native-maps";
import { View } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import MapsMarker from "../MapsMarker/MapsMarker";
import styles from "./styles";

export class MapsContainer extends Component {
  static propTypes = {
    addresses: PropTypes.object,
    coordinates: PropTypes.object,
    locations: PropTypes.array
  };

  render() {
    const { coordinates, addresses, restaurants } = this.props;
    return (
      <View style={styles.mapContainer}>
        <MapView
          style={styles.map}
          showsPointsOfInterest="false"
          showsIndoors="false"
          showsBuildings="false"
          initialRegion={{
            latitude: 150.35154,
            longitude: 12.0344940,
            latitudeDelta: 0.0145,
            longitudeDelta: 0.0055
          }}
        >
          {locations.map(location => {
            const { uuid, ...coordinate } = coordinates[addresses[location.address].coordinates];
            return (
              <Marker coordinate={coordinate} key={uuid}>
                <MapsMarker label={location.name} />
              </Marker>
            );
          })}
        </MapView>
      </View>
    );
  }
}

const mapStateToProps = state => {
  const { addresses, coordinates } = state;
  return { addresses, coordinates };
};

export default connect(mapStateToProps)(MapsContainer);

我做错了什么？为什么地图上仍然充满了额外的信息和兴趣点？

Answer 1

刚刚找到解决方法。您将需要添加自定义地图样式：

          provider={PROVIDER_GOOGLE}
          customMapStyle={[
            {
              featureType: "administrative",
              elementType: "geometry",
              stylers: [
              {
                  visibility: "off"
              }
              ]
            },
            {
              featureType: "poi",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              featureType: "road",
              elementType: "labels.icon",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            },
            {
              featureType: "transit",
              stylers: [
                {
                  visibility: "off"
                }
              ]
            }
          ]}

使用 provider 您还告诉 iOS 使用 Google 地图。确保遵循文档并正确安装它。如果你收到一些关于 RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks 的 YellowBox 警告，只需关闭你的模拟器和你的 Metro 服务器并重新启动它们。

Answer 2

您可以使用此工具以交互方式创建自定义地图样式：https://mapstyle.withgoogle.com/

并使用 customMapStyle 道具。

React Native 地图：属性“showsPointsOfInterest”、“showsIndoors”和“showsBuildings”不起作用

React Native Maps: Properties `showsPointsOfInterest`, `showsIndoors` and `showsBuildings` don't work

google-maps

react-native

react-native-maps