8
का उपयोग कर स्टाइलर बनाएं, इसलिए, मैं अपने मानचित्र पर अपने स्टाइलर बनाना चाहता हूं। उदाहरण के लिए, मान लीजिए कि मैं देश की सीमाओं में कुछ फूल (या कुछ और) रखना चाहता हूं, मैं इसे कैसे कर सकता हूं?Google नक्शे एपीआई 3 और जेएस
मैं Google मानचित्र के स्टाइलर्स का उपयोग करता हूं लेकिन एक सीमा है: हम Google द्वारा प्रदान किए गए विभिन्न स्टाइलर्स (अस्पष्टता, रंग ...) का उपयोग कर सकते हैं। मैं अपना खुद का स्टाइलर कैसे बना सकता हूं?
मेरा नक्शा स्टाइलर जैसे स्टाइलर्स का उपयोग करता है, आप Google डेवलपर पर here पा सकते हैं। प्रलेखन मेरी समस्या का वर्णन नहीं करता है और मैं सफलता के बिना स्टैक ओवरफ़्लो जैसे अन्य वेबसाइटों में कुछ तरीकों को खोजने का प्रयास करता हूं।
उदाहरण के लिए सरलीकृत करने के लिए मैं उदाहरण के लिए प्रलेखन का मानचित्र उपयोग करूंगा। तो, यह मेरा कोड है:
<!DOCTYPE html>
<html>
<head>
<title>Styled Map Types</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
प्रलेखन के अनुसार, आप रंगों को बदल सकते हैं (और कुछ परिभाषाएं जैसे संतृप्ति, हल्कापन इत्यादि - जैसा कि आपने कहा था)। यदि आप कुछ छवियां (जैसे सीमाओं पर फूलों) को रखना चाहते हैं, तो आपको अपनी खुद की ओवरले छवि (एक पारदर्शी छवि (या एकाधिक) को सीमा के रूप में फूल बनाने की आवश्यकता है): https://developers.google.com/maps/documentation/ जावास्क्रिप्ट/उदाहरण/ग्राउंड ओवरले-सरल – alalp