Google Maps API - 仅显示交通层？答案

【问题标题】：Google Maps API - Showing only the traffic layer?Google Maps API - 仅显示交通层？
【发布时间】：2014-11-20 20:13:38
【问题描述】：

我正在使用 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);
});

这是我想要完成的一个粗略示例：

JSFiddle

【问题讨论】：

标签： google-maps

【解决方案1】：

来自the documentation：可见性（打开、关闭或简化）指示元素是否以及如何出现在地图上。简化的可见性从受影响的特征中删除了一些样式特征；例如，道路被简化为没有轮廓的细线，而公园则失去了标签文本但保留了标签图标。

在styled map wizard，这给了我一张空白地图。

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

proof of concept fiddle

代码 sn-p：

$(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>

【讨论】：

【解决方案2】：

你可以试试这个：

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

【讨论】：