google-maps - react-native-maps 中的自定义 map 样式未渲染，恢复为基本/标准 map 样式

Question

在 ReactNative 应用程序上工作，我正在尝试编辑 map 样式。

我正在按照“https://github.com/react-native-community/react-native-maps”上的说明进行操作。

对于 IOS，文档建议如下。

IE:

1) 添加 mapStyle = [JSON 生成自 https://mapstyle.withgoogle.com/] .

2) 导入 PROVIDER_GOOGLE

3)添加“customMapStyle”和“provider” Prop (见下文)

但是，即使我已经手动检查了 JSON(即颜色都是黑色和灰色，根据我想要的自定义 map )渲染的 map 仍然以标准的蓝色和绿色出现？

奇怪的是，我的标记从大头针变成了一些看起来像安卓的大头针，所以发生了一些事情。

欢迎任何想法。

谢谢

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

MapStyle = [ ... ]

render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
      provider={PROVIDER_GOOGLE}
      customMapStyle={MapStyle}
    />
  );
}

Answer 1

我犯了同样的错误，从本地 json 文件中获取样式，但没有奏效。这是一个解决方法 - 将 json 样式保存在 var 中并将其传递给 customMapStyle .
读一读:Custom google map styles in React Native - medium.com