Добавить слой и стиль в Google Maps API - PullRequest
Новая
       6

Добавить слой и стиль в Google Maps API

0 голосов
/ 20 апреля 2020

Я пытаюсь, чтобы слой транзитного слоя отображался на карте со стилем, но он не работает. TransitLayer виден на карте нормалей и на виде со спутника, но не на карте, которая имеет стиль. Любые идеи?

Бонусный вопрос: я также хотел бы указать легенду над каждым из двух кругов, как на этом сайте: https://www.vianavigo.com/en/nearby/result?center=2.494094045%3B48.89430279%7CAddress%7C213+rue + Эдуард + Вайлант% 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>

1 Ответ

0 голосов
/ 27 апреля 2020

Это будет работать, когда вы удаляете следующие значения стиля, так как эти значения стиля переопределяют tranLayers на вашей карте: 

{
    "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' библиотеки Geometry. Вам также необходимо добавить это значение (library = geometry) в сценарий, в котором вы вызываете API:

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

После того, как вы получите координаты, вы можете использовать его в качестве координаты вашего маркера, где вы используете прозрачное изображение в качестве «значка» и метку круга в качестве «метки» маркера. Вы можете увидеть рабочую скрипку здесь .

Надеюсь, это поможет!

...