sah ich dieses schöne Google Maps Implementierung auf dieser Seite http://www.eduardoamaral.com.br/site/contato/Nizza Google Maps Umsetzung Schwarzweiss
binde ich den Code überprüft, und es scheint ein Rahmen zu sein, aber ich kann leider nicht wirklich sagen, kann jemand helfen ich finde was ist das?
Werfen Sie einen Blick auf die Code-Inspektion wieder, suchen Sie nach der Zeile, die //we define here the style of the map besagt, dass dieser Abschnitt des Codes das Aussehen der Google Map ändert.
Für weitere Anpassung, können Sie diese Seiten hier ansehen:
Ich glaube, dass sie nur das Google Maps API verwenden und den Stil der gerenderten Karte anpassen. Hier ist ein Link zur API. https://developers.google.com/maps/
Sie können auch herausfinden, welche Funktionsaufrufe sie tätigen. Gehen Sie in die Entwickler-Entwickler-Tools (vorausgesetzt, Sie verwenden Chrome, aber es ist auch in anderen Browsern ähnlich). Wählen Sie dann Quellen in der oberen Leiste des Developer Tools-Bereichs. Suchen Sie die Indexdatei im Quellenbereich auf der linken Seite des Entwicklertoolsbereichs. Drücken Sie die Taste {} am unteren Rand des Abschnitts, der den Code anzeigt. Dies macht den Code lesbar. Sehen Sie sich die Inhalte an, die mit Google Maps verknüpft sind. Sie können auch mit Strg + F suchen.
Ich würde empfehlen, stattdessen nur durch die Google Maps API-Website lesen.
Sie den Stil festlegen kann, wenn eine neue Karte zu erklären, pfiffige Karten sind eine gute Ressource für Google-Farbschemata abbildet .
Probieren Sie folgendes ersetzen nur this.refs.map mit dem, was Sie verwenden (Farbschema von here):
var mapStyle =[
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ededed"
},
{
"gamma": "0.00"
},
{
"lightness": "-100"
},
{
"saturation": "-67"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"saturation": 7
},
{
"lightness": 19
},
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
},
{
"saturation": "-3"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#abb1c8"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"lightness": "20"
},
{
"saturation": "-26"
},
{
"gamma": "2.33"
},
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"hue": "#ff0000"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": "-19"
}
]
},
{
"featureType": "poi.medical",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"saturation": "100"
},
{
"lightness": 31
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"hue": "#008eff"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d2d1d1"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"lightness": "3"
},
{
"color": "#ebebeb"
},
{
"saturation": "-17"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"lightness": "-15"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#e8e8e8"
},
{
"saturation": "0"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": -2
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"hue": "#4e00ff"
},
{
"saturation": "-100"
},
{
"lightness": "100"
},
{
"visibility": "simplified"
},
{
"weight": "1"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": 10
},
{
"lightness": 69
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#e7e7e7"
}
]
},
{
"featureType": "transit.station.bus",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "transit.station.bus",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -78
},
{
"lightness": 67
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"lightness": "-3"
}
]
}
]
var map = new google.maps.Map(this.refs.map,{
center: center,
zoom: 10,
styles : mapStyle
});