尼斯谷歌地圖實現黑白

Question

我看到這個漂亮的谷歌地圖在這個網站http://www.eduardoamaral.com.br/site/contato/

我檢查了代碼中嵌入落實，這似乎是一個框架，但我真的`噸告訴它，誰能幫助我發現它是什麼？

Answer 1

再看一遍代碼檢查，找//we define here the style of the map這行代碼，那段代碼是改變Google Map的外觀。

對於進一步定製，你可以在這裏看看這些網站：

https://snazzymaps.com/
https://mapstyle.withgoogle.com/

Answer 2

我相信他們只是使用Google Maps API並調整渲染地圖的樣式。這是一個到API的鏈接。 https://developers.google.com/maps/

您還可以深入瞭解他們正在進行的函數調用。進入開發人員開發人員工具（假設您使用的是Chrome，但在其他瀏覽器上也是如此）。然後選擇開發人員工具窗格頂部欄上的來源。在開發人員工具窗格左側的sources部分找到索引文件。按顯示代碼部分底部的{}按鈕。這將使代碼可讀。然後通過它來查看與Google地圖相關的內容。你也可以使用ctrl + f進行搜索。

雖然我建議您只是通過Google Maps API網站進行閱讀。

Answer 3

您可以宣告一個新地圖時所設置的風格，時髦的地圖是谷歌一個很好的資源映射的配色方案。

嘗試以下，只是無論你正在使用（配色方案從here）取代this.refs.map：

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 
    });