JSON 样式不会改变 MapView 的样式
Posted
技术标签:
【中文标题】JSON 样式不会改变 MapView 的样式【英文标题】：JSON style not changing style of MapView 【发布时间】：2019-05-13 20:40:09 【问题描述】：我正在尝试使用自定义 JSON 代码为我的 android 应用程序设置 MapView 样式，但为什么 Map style A 的代码不起作用 - 而 地图风格B呢？该代码是从Google Maps APIs Styling Wizard 网站复制的，用于在字符串中通过Switch 轻弹更改MapView 样式。
地图样式 A
[
"elementType": "geometry",
"stylers": [
"color": "#212121"
]
,
"elementType": "labels.icon",
"stylers": [
"visibility": "off"
]
,
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"elementType": "labels.text.stroke",
"stylers": [
"color": "#212121"
]
,
"featureType": "administrative",
"stylers": [
"visibility": "on"
]
,
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
"color": "#757575"
]
,
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
"color": "#9e9e9e"
]
,
"featureType": "administrative.land_parcel",
"stylers": [
"visibility": "off"
]
,
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
"color": "#bdbdbd"
]
,
"featureType": "poi",
"stylers": [
"visibility": "on"
]
,
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
"color": "#181818"
]
,
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
"color": "#616161"
]
,
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
"color": "#1b1b1b"
]
,
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
"color": "#2c2c2c"
]
,
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
"color": "#8a8a8a"
]
,
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
"color": "#373737"
]
,
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
"color": "#3c3c3c"
]
,
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
"color": "#4e4e4e"
]
,
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
"color": "#616161"
]
,
"featureType": "transit",
"stylers": [
"visibility": "on"
]
,
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"featureType": "water",
"stylers": [
"visibility": "on"
]
,
"featureType": "water",
"elementType": "geometry",
"stylers": [
"color": "#000000"
]
,
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
"color": "#3d3d3d"
]
]
地图样式 B
[
\"featureType\": \"all\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#242f3e\"
]
,
\"featureType\": \"all\",
\"elementType\": \"labels.text.stroke\",
\"stylers\": [
\"lightness\": -80
]
,
\"featureType\": \"administrative\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#746855\"
]
,
\"featureType\": \"administrative.locality\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#d59563\"
]
,
\"featureType\": \"poi\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#d59563\"
]
,
\"featureType\": \"poi.park\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#263c3f\"
]
,
\"featureType\": \"poi.park\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#6b9a76\"
]
,
\"featureType\": \"road\",
\"elementType\": \"geometry.fill\",
\"stylers\": [
\"color\": \"#2b3544\"
]
,
\"featureType\": \"road\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#9ca5b3\"
]
,
\"featureType\": \"road.arterial\",
\"elementType\": \"geometry.fill\",
\"stylers\": [
\"color\": \"#38414e\"
]
,
\"featureType\": \"road.arterial\",
\"elementType\": \"geometry.stroke\",
\"stylers\": [
\"color\": \"#212a37\"
]
,
\"featureType\": \"road.highway\",
\"elementType\": \"geometry.fill\",
\"stylers\": [
\"color\": \"#746855\"
]
,
\"featureType\": \"road.highway\",
\"elementType\": \"geometry.stroke\",
\"stylers\": [
\"color\": \"#1f2835\"
]
,
\"featureType\": \"road.highway\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#f3d19c\"
]
,
\"featureType\": \"road.local\",
\"elementType\": \"geometry.fill\",
\"stylers\": [
\"color\": \"#38414e\"
]
,
\"featureType\": \"road.local\",
\"elementType\": \"geometry.stroke\",
\"stylers\": [
\"color\": \"#212a37\"
]
,
\"featureType\": \"transit\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#2f3948\"
]
,
\"featureType\": \"transit.station\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#d59563\"
]
,
\"featureType\": \"water\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#17263c\"
]
,
\"featureType\": \"water\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#515c6d\"
]
,
\"featureType\": \"water\",
\"elementType\": \"labels.text.stroke\",
\"stylers\": [
\"lightness\": -20
]
]
片段类
class MyFragment : androidx.fragment.app.Fragment(), OnMapReadyCallback
private lateinit var mGoogleMap: GoogleMap
private lateinit var mMapView: MapView
private lateinit var swt: Switch
private lateinit var tvA: TextView
private lateinit var tvB: TextView
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View?
val v = inflater.inflate(R.layout.fragment_map, container, false)
mMapView = v.findViewById(R.id.my_map)
mMapView.onCreate(savedInstanceState)
mMapView.getMapAsync(this)
swt = v.findViewById(R.id.my_switch)
tvA = v.findViewById(R.id.imageView_a)
tvB = v.findViewById(R.id.imageView_b)
return v
override fun onMapReady(googleMap: GoogleMap)
mGoogleMap = googleMap
mGoogleMap.uiSettings.isZoomControlsEnabled = true
mGoogleMap.isBuildingsEnabled = true
mGoogleMap.mapType = GoogleMap.MAP_TYPE_NORMAL
swt.setOnCheckedChangeListener _, isChecked -> initMap(isChecked)
initMap(swt.isChecked)
val locationA = LatLng(51.746278, -0.473333)
mGoogleMap.addMarker(MarkerOptions()
.position(locationA)
.title(getString(R.string.location_a))
)
val cameraUpdate = CameraUpdateFactory.newLatLngZoom(LatLng(51.746278, -0.473333), 18f)
mGoogleMap.animateCamera(cameraUpdate)
override fun onResume()
super.onResume()
mMapView.onResume()
override fun onPause()
super.onPause()
mMapView.onPause()
override fun onDestroy()
super.onDestroy()
mMapView.onDestroy()
override fun onSaveInstanceState(outState: Bundle)
super.onSaveInstanceState(outState)
mMapView.onSaveInstanceState(outState)
override fun onLowMemory()
super.onLowMemory()
mMapView.onLowMemory()
private fun initMap(isChecked: Boolean)
when
isChecked -> mGoogleMap.setMapStyle(MapStyleOptions(resources.getString(R.string.style_json)))
else -> mGoogleMap.setMapStyle(null)
错误
E/Google Maps Android API: Map style parsing failed: org.json.JSONException: End of input at character 4356 of [ elementType: geometry, stylers: [ color: #212121 ] , elementType: labels.icon, stylers: [ visibility: off ] , elementType: labels.text.fill, stylers: [ color: #757575 ] , elementType: labels.text.stroke, stylers: [ color: #212121 ] , featureType: administrative, stylers: [ visibility: on ] , featureType: administrative, elementType: geometry, stylers: [ color: #757575 ] , featureType: administrative.country, elementType: labels.text.fill, stylers: [ color: #9e9e9e ] , featureType: administrative.land_parcel, stylers: [ visibility: off ] , featureType: administrative.locality, elementType: labels.text.fill, stylers: [ color: #bdbdbd ] , featureType: poi, stylers: [ visibility: on ] , featureType: poi, elementType: labels.text.fill, stylers: [ color: #757575 ] , featureType: poi.park, elementType: geometry, stylers: [ color: #181818 ] , featureType: poi.park, elementType: labels.text.fill, stylers: [ color: #616161 ] , featureType: poi.park, elementType: labels.text.stroke, stylers: [ color: #1b1b1b ] , featureType: road, elementType: geometry.fill, stylers: [ color: #2c2c2c ] , featureType: road, elementType: labels.text.fill, stylers: [ color: #8a8a8a ] , featureType: road.arterial, elementType: geometry, stylers: [ color: #373737 ] , featureType: road.highway, elementType: geometry, stylers: [ color: #3c3c3c ] , featureType: road.highway.controlled_access, elementType: geometry, stylers: [ color: #4e4e4e ] , featureType: road.local, elementType: labels.text.fill, stylers: [ color: #616161 ] , featureType: transit, stylers: [ visibility: on ] , featureType: transit, elementType: labels.text.fill, stylers: [ color: #757575 ] , featureType: water, stylers: [ visibility: on ] , featureType: water, elementType: geometry, stylers: [ color: #000000 ] , featureType: water, elementType: labels.text.fill, stylers: [ color: #3d3d3d ] ] [ elementType: geometry, stylers: [ color: #212121 ] , elementType: labels.icon, stylers: [ visibility: off ] , elementType: labels.text.fill, stylers: [ color: #757575 ] , elementType: labels.text.stroke, stylers: [ color: #212121 ] , featureType: administrative, elementType: geometry, stylers: [ color: #757575 ] , featureType: administrative.country, elementType: labels.text.fill, stylers: [ color: #9e9e9e ] , featureType: administrative.land_parcel, stylers: [ visibility: off ] , featureType: administrative.locality, elementType: labels.text.fill, stylers: [ color: #bdbdbd ] , featureType: poi, elementType: labels.text.fill, stylers: [ color: #757575 ] , featureType: poi.attraction, stylers: [ visibility: on ] , featureType: poi.business, stylers: [ visibility: on ] , featureType: poi.government, stylers: [ visibility: on ] , featureType: poi.medical, stylers: [ visibility: on ] , featureType: poi.park, elementType: geometry, stylers: [ color: #181818 ] , featureType: poi.park, elementType: labels.text.fill, stylers: [ color: #616161 ] , featureType: poi.park, elementType: labels.text.stroke, stylers: [ color: #1b1b1b ] , featureType: poi.place_of_worship, stylers: [ visibility: on ] , featureType: poi.school, stylers: [ visibility: on ] , featureType: poi.sports_complex, stylers: [ visibility: on ] , featureType: road, elementType: geometry.fill, stylers: [ color: #2c2c2c ] , featureType: road, elementType: labels.text.fill, stylers: [ color: #8a8a8a ] , featureType: road.arterial, elementType: geometry, stylers: [ color: #373737 ] , featureType: road.highway, elementType: geometry, stylers: [ color: #3c3c3c ] , featureType: road.highway.controlled_access, elementType: geometry, stylers: [ color: #4e4e4e ] , featureTyp
strings.xml 中的 JSON 代码
<string name="style_json">
[
"elementType": "geometry",
"stylers": [
"color": "#212121"
]
,
"elementType": "labels.icon",
"stylers": [
"visibility": "off"
]
,
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"elementType": "labels.text.stroke",
"stylers": [
"color": "#212121"
]
,
"featureType": "administrative",
"stylers": [
"visibility": "on"
]
,
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
"color": "#757575"
]
,
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
"color": "#9e9e9e"
]
,
"featureType": "administrative.land_parcel",
"stylers": [
"visibility": "off"
]
,
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
"color": "#bdbdbd"
]
,
"featureType": "poi",
"stylers": [
"visibility": "on"
]
,
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
"color": "#181818"
]
,
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
"color": "#616161"
]
,
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
"color": "#1b1b1b"
]
,
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
"color": "#2c2c2c"
]
,
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
"color": "#8a8a8a"
]
,
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
"color": "#373737"
]
,
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
"color": "#3c3c3c"
]
,
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
"color": "#4e4e4e"
]
,
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
"color": "#616161"
]
,
"featureType": "transit",
"stylers": [
"visibility": "on"
]
,
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
"color": "#757575"
]
,
"featureType": "water",
"stylers": [
"visibility": "on"
]
,
"featureType": "water",
"elementType": "geometry",
"stylers": [
"color": "#000000"
]
,
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
"color": "#3d3d3d"
]
]
</string>
【问题讨论】：
请提供更多详细信息（实际代码），说明您如何将此样式应用于地图。 @AnhaytAnanun 刚刚添加。不确定是不是 JSON 代码本身的问题。 你能不能调试和验证两件事：isChecked 是真的并且样式是实际设置的，并且你的字符串资源是一个有效的 json。 @AnhaytAnanun 调试器给出错误。刚刚发布在我的问题中。 使用任何在线 json 有效性检查器检查您的 json 是否有效。我可以建议将您的 json 移动到 java 文件并声明为字符串。这样您就可以避免任何可能的特殊字符格式错误。 【参考方案1】：请尝试将其用作您的 style_json。这是stlye A。 根据 Google 文档，必须存在反斜杠。 https://developers.google.com/maps/documentation/android-sdk/styling
<string name="style_json">
[
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#212121\"
]
,
\"elementType\": \"labels.icon\",
\"stylers\": [
\"visibility\": \"off\"
]
,
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#757575\"
]
,
\"elementType\": \"labels.text.stroke\",
\"stylers\": [
\"color\": \"#212121\"
]
,
\"featureType\": \"administrative\",
\"stylers\": [
\"visibility\": \"on\"
]
,
\"featureType\": \"administrative\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#757575\"
]
,
\"featureType\": \"administrative.country\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#9e9e9e\"
]
,
\"featureType\": \"administrative.land_parcel\",
\"stylers\": [
\"visibility\": \"off\"
]
,
\"featureType\": \"administrative.locality\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#bdbdbd\"
]
,
\"featureType\": \"poi\",
\"stylers\": [
\"visibility\": \"on\"
]
,
\"featureType\": \"poi\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#757575\"
]
,
\"featureType\": \"poi.park\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#181818\"
]
,
\"featureType\": \"poi.park\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#616161\"
]
,
\"featureType\": \"poi.park\",
\"elementType\": \"labels.text.stroke\",
\"stylers\": [
\"color\": \"#1b1b1b\"
]
,
\"featureType\": \"road\",
\"elementType\": \"geometry.fill\",
\"stylers\": [
\"color\": \"#2c2c2c\"
]
,
\"featureType\": \"road\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#8a8a8a\"
]
,
\"featureType\": \"road.arterial\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#373737\"
]
,
\"featureType\": \"road.highway\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#3c3c3c\"
]
,
\"featureType\": \"road.highway.controlled_access\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#4e4e4e\"
]
,
\"featureType\": \"road.local\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#616161\"
]
,
\"featureType\": \"transit\",
\"stylers\": [
\"visibility\": \"on\"
]
,
\"featureType\": \"transit\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#757575\"
]
,
\"featureType\": \"water\",
\"stylers\": [
\"visibility\": \"on\"
]
,
\"featureType\": \"water\",
\"elementType\": \"geometry\",
\"stylers\": [
\"color\": \"#000000\"
]
,
\"featureType\": \"water\",
\"elementType\": \"labels.text.fill\",
\"stylers\": [
\"color\": \"#3d3d3d\"
]
]
</string>
【讨论】：
以上是关于JSON 样式不会改变 MapView 的样式的主要内容，如果未能解决你的问题，请参考以下文章