Google Maps API - 僅顯示流量圖層？

我正在使用Google Maps API來顯示我所在地區的交通狀況，我想知道是否可以隱藏它的實際地圖部分，以便只有交通層可見（綠色/紅色/黃色交通車道和道路名稱將可見，但背景將是透明或純色，而不是顯示地圖）。Google Maps API - 僅顯示流量圖層？

這是我到目前爲止有：

$(function() { 
    var map = new google.maps.Map(document.getElementById("map"), 
    { 
     zoom: 12, 
     center: new google.maps.LatLng(34.0204989,-118.4117325), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDoubleClickZoom: true, 
     draggable: false, 
     scrollwheel: false, 
     panControl: false, 
     disableDefaultUI: true 
    }); 

    var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(map); 
});

這裏是什麼，我試圖完成粗例如： enter image description here

JSFiddle

來源

2014-11-20 user13286

請參閱文檔中的[樣式化地圖]（https://developers.google.com/maps/documentation/javascript/styling）。或者製作[自定義地圖]（https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes）。 – geocodezip 2014-11-20 20:55:28

謝謝，我瀏覽過文檔，但沒有看到任何關於完全隱藏地圖的信息，只是更改顏色。來自[文檔]（https://developers.google.com/maps/documentation/javascript/styling）的 – user13286 2014-11-20 21:12:09

：可見性（開啓，關閉或簡化）指示元素是否以及如何在地圖上顯示。簡化的可見性從受影響的功能中刪除了一些樣式功能;例如，道路被簡化爲沒有輪廓的細線，而公園失去標籤文本但保留標籤圖標。 – geocodezip 2014-11-20 21:27:03

在styled map wizard，這給了我一個空白地圖。

[ 
    { 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    } 
]

proof of concept fiddle

代碼片段：

$(function() { 
 
    var map = new google.maps.Map(document.getElementById("map"), { 
 
    zoom: 12, 
 
    center: new google.maps.LatLng(34.0204989, -118.4117325), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDoubleClickZoom: true, 
 
    draggable: false, 
 
    scrollwheel: false, 
 
    panControl: false, 
 
    disableDefaultUI: true, 
 
    styles: [{ 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }] 
 
    }); 
 

 
    var trafficLayer = new google.maps.TrafficLayer(); 
 
    trafficLayer.setMap(map); 
 
});

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map" style="border: 2px solid #3872ac;"></div>

來源

2014-11-20 21:28:59 geocodezip

你可以試試這個：

var map = new google.maps.Map(document.getElementById("map-canvas"), 
{ 
    zoom: 12, 
    center: new google.maps.LatLng(34.0204989,-118.4117325), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: [ 
     { 
      featureType: 'poi', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      featureType: 'road', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      featureType: 'transit', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      featureType: 'landscape', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      elementType: 'labels', 
      stylers: [ 
       { visibility: 'on' } 
      ] 
     } 
    ] 

}); 

var trafficLayer = new google.maps.TrafficLayer(); 
trafficLayer.setMap(map);

來源

2015-08-22 11:34:26

Google Maps API - 僅顯示流量圖層？

回答

相關問題