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（即颜色都是黑色和灰色，根据我想要的自定义地图），渲染的地图仍然是标准的蓝色和绿色？

奇怪的是，我的标记从图钉变成了一些看起来像安卓的图钉，所以有些事情正在发生。

欢迎任何想法。

谢谢

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

。 请阅读：React Native 中的自定义谷歌地图样式 -medium.com

Answer 2

自定义样式对我不起作用的原因是 JSON 具有过时的参数，因此地图默认为默认主题。正如 ser fiy 所指出的，请确保从 https://mapstyle.withgoogle.com/

下载 JSON

Answer 3

首先进入官方页面，即 https://mapstyle.withgoogle.com/ 获取样式值的 json 并复制到资源中的原始文件夹

然后像这样应用到你的 onMapready() 上

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

Answer 4

我使用const变量来存储json对象。它不起作用。然后我将 const 更改为 var 并为我工作。