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 - 仅显示流量图层？

回答

相关问题