在谷歌地图 api 中添加图层和样式

Question

我正在尝试使transitLayer 层出现在具有样式的map 上，但它不起作用。 transitLayer 在普通 map 和卫星视图上可见，但在具有样式的 map 上不可见。 有任何想法吗？

奖励问题：我还想在本网站上的两个圆圈上方标出一个图例： https://www.vianavigo.com/en/nearby/result?center=2.494094045%3B48.89430279%7CAddress%7C213+ rue + Edouard + Vaillant% 7C93140% 7CBondy% 7C611561.9084090972% 7C2432902.394653598 & e = 0 & filters = 111

<script>
      function initMap() {

    var styledMapType = new google.maps.StyledMapType(
        [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "landscape",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
], {
            name: 'Styled Map'
        });
          var bondy = {lat: 48.894362, lng: 2.494127};
    var map = new google.maps.Map(document.getElementById('map'), {
        center: bondy,
        zoom: 15,
        mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                'styled_map'
            ]
        }

    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');

    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);
    transitLayer.setMap(styledMapType); 

          var circle = new google.maps.Circle({
            center: bondy,
            map: map,
            radius: 1000,          // IN METERS.
            fillColor: '#fcd18d',
            fillOpacity: 0.1,
            strokeColor: "#fcd18d",
            strokeWeight: 3,         // DON'T SHOW CIRCLE BORDER.

        });

          var circle = new google.maps.Circle({
            center: bondy,
            map: map,
            radius: 500,          // IN METERS.
            fillColor: '#fcd18d',
            fillOpacity: 0.4,
            strokeColor: "#fcd18d",
            strokeWeight: 3         // DON'T SHOW CIRCLE BORDER.
        });
          var marker = new google.maps.Marker({
          position: bondy,
          map: map,
        title: "Bondy - 213-215 rue Édouard Vaillant"

        });
}
    </script>

Answer 1

当您删除以下样式值时，它将起作用，因为这些样式值会覆盖 map 上的传输层：

{
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  }

和

{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  }

至于圆的标签，没有可用于圆对象的直接 label 参数。 有多种方法可以实现此目的，例如使用带有透明图标的标记和 label、使用 infowindow 和使用自定义覆盖。 我使用了一个带有透明图标的标记，这是代码片段和我如何获得它的解释：

 var Circle1  = google.maps.geometry.spherical.computeOffset(center, 1000, 0);

        var invisibleMarker1 = new google.maps.Marker({
          position: Circle1,
          map: map,
          icon: "https://www.iconspng.com/uploads/transparent-background-pattern/transparent-background-pattern.png",
          label: "1000"

首先，我需要获取 map 中圆的最顶部的坐标。 我通过使用几何库的“computeOffset”得到了这个。 您还需要在调用 API 的脚本中添加此值（libraries=geometry）：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&&libraries=geometry&callback=initMap" async defer></script>

获得坐标后，您可以将其用作标记的坐标，其中使用透明图像作为“图标”，将圆圈 label 作为标记的“标签”。 你可以在这里看到工作小提琴。

希望这可以帮助！