React Native Maps：属性`showsPointsOfInterest`、`showsIndoors`和`showsBuildings`不起作用

Question

即使我明确设置showsPointsOfInterest,showsIndoors和showsBuildingsto 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

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

并使用 customMapStyle 属性。

Answer 2

刚刚发现如何解决这个问题。您将需要添加自定义地图样式：

          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 使用谷歌地图。确保遵循文档并正确安装它。如果您收到一些关于RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks关闭模拟器和 Metro 服务器并重新启动两者的YellowBox 警告。