React-Native-Maps中自定义地图样式无法渲染，恢复为基本/标准地图样式。

Question

我正在开发一个ReactNative应用程序，尝试编辑地图样式。

我正在遵循 "https://github.com/react-native-community/react-native-maps" 上的说明。

对于IOS，文档建议如下。

即:

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

2) 导入PROVIDER_GOOGLE

3) 添加'customMapStyle'和'provider'属性（见下文）

然而，尽管我已经手动检查了JSON（即所需自定义地图的所有颜色都是黑色和灰色），但呈现的地图仍然是标准的蓝色和绿色？

奇怪的是，我的标记从针变成了一些Android样式的标记，因此肯定发生了某些事情。

欢迎任何想法。

谢谢

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

MapStyle = [ ... ]

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

- David Pears

---

您是否有解决此问题的方案？ - Sahil Jaidka

Answer 1

我曾犯了从本地JSON文件中获取样式的错误，这种方法行不通。这是一个解决办法 - 将JSON样式保存在var中，并将其传递给customMapStyle。 详细请参阅：React Native中自定义谷歌地图样式-medium.com

- Rahul Dasgupta

Answer 2

我没能成功使用自定义样式是因为JSON参数已经过时，所以地图回到了默认主题。正如ser fiy所指出的那样，请确保从https://mapstyle.withgoogle.com/下载JSON。

- Otto Ranta-Ojala

---

这个很好用，它有6个终极主题，全部都非常棒。 - Rohit Parte

Answer 3

首先进入官方网站https://mapstyle.withgoogle.com/，获取你的样式值的json并复制到资源文件夹中的raw文件夹中

然后在你的onMapready()函数中应用如下：

MapStyleOptions mapStyleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json);
mGoogleMap.setMapStyle(mapStyleOptions);

- ser fiy

Answer 4

我使用了一个const变量来存储JSON对象，但是它没有起作用。然后我将const改为var，这样对我来说就起作用了。

- Lasitha Lakmal