Mapy Google w skali szarości

Czy Jest jakiś sposób na wyświetlenie Mapy Google (osadzonej za pośrednictwem Javascript API) w skali szarości bez utraty żadnej innej funkcjonalności?

Author: Soner Gönül, 2010-10-23
Source

8 answers

Tak, W V3 api wprowadzili StyledMaps.

Dostarczyli nawet narzędzie do generowania kodu dla stylów, które lubisz. Przesuń "nasycenie" aż w dół i masz skalę szarości dzieje!

Poniższy przykład wyświetla mapę Brooklynu w skali szarości: 

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');
 106
Author: Roatin Marth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-23 11:16:10

Jest trochę krótszy sposób (w porównaniu do @Roatin Marth ' S najlepsza odpowiedź), aby uzyskać skalę szarości Mapy Google za pomocą Google Maps JavaScript API V3 poprzez bezpośrednie włączenie stylów wygenerowanych za pomocą Google Maps API Styled Map Wizard do google.maps.MapOptions obiekt: 

var container = document.getElementById('map_canvas');
var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(40.6743890, -73.9455),
  styles: [{
    stylers: [{
      saturation: -100
    }]
  }]
};

var map = new google.maps.Map(container, mapOptions);

Ustawia się tablicę pod właściwością styles W Zmiennej mapOptions, klikając przycisk "Pokaż JSON" w panelu styl mapy po zakończeniu dostosowywania stylów za pomocą interfejsu API Google Maps API Wizard .

Wyjście JSON demonstrujące tablicę stylów do Ustawienia w mapOptions

 31
Author: Nik Sumeiko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:24

Po prostu użyj CSS3 grayscale () efektu filtra dla elementu iframe Google maps! Działa, ponieważ kod js drukuje obrazy.

iframe { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Spróbuj również kierować tylko obrazy tła , stosując to do pierwszego elementu div pod div.gm-style (lub dowolnym innym opakowaniem). Nie wiem, czy Google często zmienia strukturę dom, ale w tej chwili (25 Nov 2014) to działa dobrze.

iframe .gm-style > div:first-child {
  // Same code here
}
 11
Author: TheodorosPloumis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-25 11:10:03
 1
Author: HasanAboShally,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 13:09:59

IE posiada dyrektywę filter: gray.

Renderuje dowolny element HTML w skali szarości. JSFiddle tutaj .

Ty możesz być w stanie zastosować to do nadrzędnego DIV mapy. To Może zmienić mapę, która zawiera w do odwzorowania skali szarości. Nie mogę powiedzieć, czy to zadziała bez skutków ubocznych - trzeba by spróbować. Ale to możliwe.

TYLKO IE, ale Obsługiwane od wersji 4.

Filtry skali szarości w MSDN

Inne poza tym, myślę, że jest API Flash dla map, prawda? Tam może być łatwiej.

 0
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-23 11:00:15

Użyj właściwości filtr CSS, aby przekonwertować mapę google na czarno-białą. 100% jest całkowicie czarno-biały 

selector {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
 0
Author: swathi_sri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-03 12:58:44

Tak, istnieje API stron trzecich dla Google maps, który zapewnia szarą skalę (snazzymaps).

To bardzo proste. Możesz użyć tej strony, aby uzyskać inny schemat kolorów dla Map google.

Http://snazzymaps.com

 -1
Author: Bastin Robin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-13 09:33:24

Oprócz pisania dobrych ludzi w Google i prosząc ich o stworzenie szarych wersji wszystkich swoich płytek graficznych i opcjonalnego parametru API, Nie.

 -13
Author: Stan Rogers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-23 10:51:36