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}
    />
  );
}

Answer 1

我犯了同样的错误，即从本地json文件中获取样式，但没有成功。解决方法是-将json样式保存在clim_var.x中，并将其传递给expected_result<- data.frame( year= c(rep("2009", 16), rep("2010", 16)), elev_cat= rep(c("low", "low", "high", "high"),8), clim_var=c(rep("ppt", 4),rep("tmax", 4), rep("anom1", 4),rep("anom2", 4),rep("ppt", 4),rep("tmax", 4), rep("anom1", 4),rep("anom2", 4)), div_var=rep(c("lep_div", "psit_div", "lep_div", "psit_div"), 8), div_value=c(rep(c(5,4,3,2),4), rep(c(8,9,10,11),4)), clim_value=c(1.5, 1.5, 3.7,3.7,3.4,3.4,2.5,2.5,1,1,2,2, 3.4, 3.4, 5, 5,2.17,2.17,3.7,3.7, 8.9,8.9, 4.5,4.5,2.1,2.1,3.1,3.1,4,4,5,5))。阅读：Custom google map styles in React Native - medium.com

Answer 2

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

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

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

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

2 个答案: