react-native-maps使用Google Map时显示3D如何切换为指定2D自定义样式

我已查阅react-native-maps官方文档，但始终无法排查出Google Map显示为3D效果的原因，当前实际呈现效果见截图：

我期望实现的是使用mapstyle.withgoogle.com生成的2D自定义地图样式，预期效果见截图：

我的实现代码如下：

import * as React from 'react';
import MapView, { Polygon, PROVIDER_GOOGLE } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import mapStyle from './assets/mapStyle.json';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        customMapStyle={mapStyle}
        showsUserLocation>
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

请问是什么原因导致地图默认展示3D效果，需要如何调整才能实现预期的2D自定义样式？

• Google Maps移动端SDK默认开启了3D建筑渲染、倾斜手势、旋转手势三个特性，你的代码中没有手动关闭对应配置，会默认呈现3D效果
• 若导出的自定义地图样式未显式关闭3D建筑图层的显示规则，也会保留3D建筑元素的渲染

你需要在MapView组件上新增几个控制属性，具体修改点如下：

• 新增showsBuildings={false}，关闭3D建筑的渲染
• 新增rotateEnabled={false}，禁用地图旋转手势，避免视角偏移为非俯视角度
• 新增pitchEnabled={false}，禁用地图倾斜手势，禁止调整俯仰角度
• 可额外添加initialCamera属性，固定初始化视角为正俯视的2D状态，将俯仰角pitch设为0，朝向角heading设为0

修改后的代码示例：

import * as React from 'react';
import MapView, { Polygon, PROVIDER_GOOGLE } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import mapStyle from './assets/mapStyle.json';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        customMapStyle={mapStyle}
        showsUserLocation
        // 新增以下配置
        showsBuildings={false}
        rotateEnabled={false}
        pitchEnabled={false}
        initialCamera={{
          center: {
            // 可替换为你的默认中心点坐标
            latitude: 39.9042,
            longitude: 116.4074,
          },
          zoom: 10,
          pitch: 0,
          heading: 0,
        }}
      >
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

如果修改后仍有3D元素，检查你导出的mapStyle.json文件，确认是否存在开启3D建筑显示的样式规则，对应关闭即可。

内容的提问来源于stack exchange，提问作者Marko Serk