我正在使用 Maps Javascript API 并對其進行樣式設定。地圖加載良好，沒有錯誤，并且設定了除一個之外的所有興趣點的樣式。我一直無法找到一種風格停車場（付費停車場/地下停車場/大樓停車場/體育館停車場）的方式。
我已經使用了參考表中列出的幾乎所有選項，并且無法使用能夠使其作業的功能型別。我還使用 google map styler 創建了自定義地圖樣式，但沒有一個要素型別選項會改變停車場樣式。
這是我用來設定地圖樣式的代碼...
const styles = {
default: [],
hide: [
{
featureType: "all",
elementType: "labels.text.fill",
stylers: [
{
"saturation": 100
},
{
"color": "#999999" /* e944e9 */
},
{
"lightness": 15
}
]
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 0
}
]
},
{
featureType: "all",
elementType: "labels.icon",
stylers: [
{
"visibility": "off"
}
]
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.school",
elementType: "geometry.fill",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.medical",
elementType: "geometry.fill",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 10
},
{
"weight": 1.2
}
]
},
{
featureType: "administrative.neighborhood",
elementType: "geometry.stroke",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 100
},
{
"weight": 1.2
}
]
},
{
featureType: "poi.sports_complex",
elementType: "geometry",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [
{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 21
}
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 1
}
]
},
{
featureType: "poi",
elementType: "geometry.stroke",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 100
}
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 0.2
}
]
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "transit",
elementType: "geometry",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
"color": "#220a4b"
},
{
"lightness": 1
}
]
},
{
featureType: "poi.business",
stylers: [{ "visibility": "off" }],
},
{
featureType: "poi.government",
elementType: "labels.icon",
stylers: [{ "visibility": "off" }],
},
{
featureType: "poi.medical",
elementType: "labels.icon",
stylers: [{ "visibility": "off" }],
},
{
featureType: "poi.place_of_worship",
stylers: [{ "visibility": "off" }],
},
{
featureType: "poi.park",
elementType: "labels.icon",
stylers: [{ "visibility": "off" }],
},
{
featureType: "transit.station.bus",
elementType: "labels.icon",
stylers: [{ "visibility": "on" }],
},
{
featureType: "transit.line",
elementType: "labels.icon",
stylers: [{ "visibility": "off" }],
},
],
uj5u.com熱心網友回復：
似乎沒有一種方法可以針對停車進行造型（并非所有內容都可以直接針對）。
您可以嘗試創建
代碼片段：
let map;
let infowindow;
function initMap() {
infowindow = new google.maps.InfoWindow();
// Styles a map.
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 32.7169289,
lng: -117.1657514
},
zoom: 16,
styles: [{
featureType: "all",
elementType: "labels.text.fill",
stylers: [{
"saturation": 100
},
{
"color": "#999999" /* e944e9 */
},
{
"lightness": 15
}
]
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: [{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 0
}
]
},
{
featureType: "all",
elementType: "labels.icon",
stylers: [{
"visibility": "off"
}]
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.school",
elementType: "geometry.fill",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi.medical",
elementType: "geometry.fill",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [{
"color": "#260f50"
},
{
"lightness": 10
},
{
"weight": 1.2
}
]
},
{
featureType: "administrative.neighborhood",
elementType: "geometry.stroke",
stylers: [{
"color": "#260f50"
},
{
"lightness": 100
},
{
"weight": 1.2
}
]
},
{
featureType: "poi.sports_complex",
elementType: "geometry",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [{
"color": "#260f50"
},
{
"lightness": 0
}
]
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 21
}
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 1
}
]
},
{
featureType: "poi",
elementType: "geometry.stroke",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 100
}
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
},
{
"weight": 0.2
}
]
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 8
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [{
"color": "#220a4b"
},
{
"lightness": 1
}
]
},
{
featureType: "poi.business",
stylers: [{
"visibility": "off"
}],
},
{
featureType: "poi.government",
elementType: "labels.icon",
stylers: [{
"visibility": "off"
}],
},
{
featureType: "poi.medical",
elementType: "labels.icon",
stylers: [{
"visibility": "off"
}],
},
{
featureType: "poi.place_of_worship",
stylers: [{
"visibility": "off"
}],
},
{
featureType: "poi.park",
elementType: "labels.icon",
stylers: [{
"visibility": "off"
}],
},
{
featureType: "transit.station.bus",
elementType: "labels.icon",
stylers: [{
"visibility": "on"
}],
},
{
featureType: "transit.line",
elementType: "labels.icon",
stylers: [{
"visibility": "off"
}],
},
],
});
service = new google.maps.places.PlacesService(map);
var request = {
location: map.getCenter(),
keyword: "parking",
radius: '1000',
type: ['parking']
};
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log("results=" results.length " status=" status)
for (var i = 0; i < results.length; i ) {
console.log("[" i "] name=" results[i].name " location=" results[i].geometry.location.toUrlValue(6));
createMarker(results[i]);
}
}
}
function createMarker(place) {
if (!place.geometry || !place.geometry.location) return;
const marker = new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
label: "P"
});
google.maps.event.addListener(marker, "click", () => {
infowindow.setContent(place.name || "");
infowindow.open(map, marker);
});
}
window.initMap = initMap;#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Styled Maps - Night Mode</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&libraries=places" defer></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/514737.html
標籤：api谷歌地图