2010-10-26 11 views
23

znalazłem fragment kodu na http://www.41latitude.com/post/1268734799/google-styled-maps:Google Maps v3 ukrywanie elementów (drogi, roadsigns, etc)

[ 
    { 
    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" } 
    ] 
    } 
] 

będę mógł go używać w moich mapach, ale jest tam ktoś, kto może mi jak powiedzieć Mogę użyć tego fragmentu? Nie mogę znaleźć niczego na ten temat w API Map Google V3.

+0

ja naprawdę nie widzę dużo na stronie, wygląda na to, że są za pomocą różnych basemaps drogowego, satelite itp. Manipulują opcjami stylizacji, które już zostały szczegółowo opisane. – Drew

+0

To tutaj https://developers.google.com/maps/documentation/javascript/styling – BigJ

Odpowiedz

33

Jako @ceejayoz suggested in the other answer, próbujesz użyć nowego Styled Map features z v3 Maps API. Oto bardzo prosty przykład, jak można użyć powyższy styl w prosty mapie:

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

Zrzut ekranu:

alt text

Można również zapoznać się z Google Maps APIs Styling Wizard który pozwoli na graficznie edytuj style.

+0

Świetnie, ten przykład był dobrym przykładem i dał mi rozwiązanie. –

+0

Czy można zrobić coś takiego: 'featureType: [" poi "," transit "]' tj. Wybierając je wszystkie, a następnie wyłączając widoczność dla nich wszystkich w tym samym czasie? – user2019515

+0

Tak, możesz, użyj 'featureType:" all "' – GreatBittern

2

Wiem, że to jest 5 lat, ale natknąłem się na to, a przyjęte rozwiązanie jest o wiele bardziej skomplikowane, niż było to potrzebne w mojej opinii. Biorąc pod uwagę JSON w oryginalnym poście, to w jaki sposób zastosować styl do istniejącej mapy:

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); 
Powiązane problemy