JSON 样式不改变 MapView 的样式

Question

我正在尝试使用自定义 JSON 代码为我的 android 应用程序设置 MapView 的样式，但为什么 Map 样式 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

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

JSON strings.xml

中的代码

<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>

Answer 1

请尝试将其用作您的 style_json。这是stly 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 的样式

JSON style not changing style of MapView

android

json

google-maps

android-maps-v2