2010-10-26 20 views
23

मैं http://www.41latitude.com/post/1268734799/google-styled-maps पर एक कोड स्निपेट पाया:गूगल मैप्स v3 छिपाने तत्वों (सड़कें, roadsigns, आदि)

[ 
    { 
    featureType: "administrative", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "poi", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "water", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "road", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    } 
] 

मैं अपने नक्शे में इसका इस्तेमाल करने में सक्षम होना चाहिए, लेकिन वहाँ किसी को जो मुझे कैसे बता सकता है मैं इस स्निपेट का उपयोग कर सकता हूँ? मुझे Google मानचित्र V3 के एपीआई में इसके बारे में कुछ भी नहीं मिला।

+0

मैं वास्तव में पृष्ठ पर ज्यादा नहीं दिख रहा है, ऐसा लगता है कि वे विभिन्न basemaps सड़क, उपग्रह का उपयोग कर रहे , आदि। वे पहले से ही विस्तृत स्टाइल विकल्पों में हेरफेर करते हैं। – Drew

+0

यह यहाँ है https://developers.google.com/maps/documentation/javascript/styling – BigJ

उत्तर

33

@ceejayoz suggested in the other answer के रूप में, आप v3 Maps API के नए Styled Map features का उपयोग करने का प्रयास कर रहे हैं। यहाँ कैसे आप एक सरल नक्शे में ऊपर शैली इस्तेमाल कर सकते हैं की एक बहुत ही बुनियादी उदाहरण है:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Dark Water Style Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 550px; height: 300px;"></div> 

    <script type="text/javascript"> 
    var myStyle = [ 
     { 
     featureType: "administrative", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     },{ 
     featureType: "poi", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     },{ 
     featureType: "water", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     },{ 
     featureType: "road", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     } 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeControlOptions: { 
     mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN] 
     }, 
     center: new google.maps.LatLng(30, 0), 
     zoom: 3, 
     mapTypeId: 'mystyle' 
    }); 

    map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' })); 
    </script> 
</body> 
</html> 

स्क्रीनशॉट:

alt text

तुम भी Google Maps APIs Styling Wizard जो आप करने की अनुमति देगा की जाँच कर सकते हैं ग्राफिक रूप से शैलियों को संपादित करें।

+0

बढ़िया, यह उदाहरण एक अच्छा उदाहरण था और मुझे समाधान दिया। 'अर्थात उन सब को चयन करके और फिर एक ही समय में उन सब के लिए दृश्यता अक्षम करने [" poi "," पारगमन "]:' featureType: –

+0

कुछ इस तरह करना संभव यह है? – user2019515

+0

हाँ आप कर सकते हैं, 'फीचर टाइप टाइप करें: "सभी" ' – GreatBittern

1

आपके द्वारा लिंक किया गया पृष्ठ the Google Maps API documentation for this feature पर एक लिंक शामिल है।

+1

ठीक है, लिंक याद किया। मेरी प्रेमिका की तरह कहते हैं: मैं एक अच्छा खोजकर्ता हूं, लेकिन एक बुरा खोजक! –

2

मुझे पता है कि यह 5 साल का है, लेकिन मैं इस पर ठोकर खाई और स्वीकार्य समाधान मेरी राय में आवश्यक से अधिक जटिल है। मूल पोस्ट में JSON को देखते हुए, यह आपके द्वारा किसी मौजूदा नक्शे के लिए शैली लागू होता है:

var mapStyle = [ 
    { 
    featureType: "administrative", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "poi", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "water", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    },{ 
    featureType: "road", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    } 
] 

//create map 
var map = new google.maps.Map(...); //This assumes you already have a working map 

//set style 
map.set('styles', mapStyle); 
संबंधित मुद्दे