在 google 地图 api 中添加图层和样式

Question

我试图让 transitLayer 图层以一种样式出现在地图上，但它不起作用。 transitLayer 在法线地图和卫星视图上可见，但在具有样式的地图上不可见。有什么想法吗？

奖金问题：我还想在本网站上的 2 个圆圈中的每一个上方注明一个图例：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

当您删除以下样式值时它将起作用，因为这些样式值将覆盖您地图上的 transitLayers：

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

和

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

至于您的圈子的标签，没有可用于圆形对象的直接标签参数。您可以通过多种方式实现这一点，例如使用带有透明图标和标签的标记、使用信息窗口和使用自定义叠加层。我使用了带有透明图标的标记，这是代码片段和我如何获得它的解释：

 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"

首先，我需要获取地图中圆圈最顶端的坐标。我通过使用几何库的 'computeOffset' 得到了这个。您还需要在调用 API 的脚本中添加此值 (libraries=geometry)：

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

获得坐标后，您可以将其用作标记的坐标，其中使用透明图像作为 'icon' 并将圆形标签用作标记的 'label'。你可以看到 working fiddle here.

希望对您有所帮助！

在 google 地图 api 中添加图层和样式

Add a layer and a style in google maps api

javascript

google-maps-api-3