Question

即使我将showsPointsOfInterest，showsIndoors和showsBuildings显式设置为false-尝试同时使用字符串"false"和布尔值false-我在React Native中的MapView呈现了各种附加信息。我希望地图整洁，并适合用户。这是我的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 Maps：属性showsPointsOfInterest，showsIndoors和showsBuildings不起作用

2 个答案: