Добавьте HTML вокруг пользовательского маркера карты Google - PullRequest
Новая
       7

Добавьте HTML вокруг пользовательского маркера карты Google

0 голосов
/ 13 января 2019

Я пытаюсь добавить импульсный эффект к пользовательскому маркеру карты. Когда я добавляю анимационный CSS к маркеру карты, анимация работает, но, похоже, она связана с размерами контейнера, в который она помещается, обрезая эффект импульса. Я пытаюсь выяснить, как добавить div вокруг изображения маркера, чтобы я мог контролировать его размер и, возможно, другие атрибуты. Вот как я инициализирую карту: 

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(20, -80),
      disableDefaultUI: true
    });


    var features = [
     {
       position: new google.maps.LatLng(20, -80)
     }
    ];

    // Create markers
       features.forEach(function(feature) {
       var marker = new google.maps.Marker({
       position: feature.position,
       icon: 'images/map-pin.svg',
       map: map
    });
   });
  }

Это помещает булавку на карту, и с помощью CSS я добавляю анимацию: 

   img[src*='map-pin-solid.svg'] {
     animation: pulse 1.5s ease-out infinite;
   }

Это работает, но, как уже упоминалось, вывод привязан к его контейнеру div, поэтому анимация импульса обрезается на границах div. Я хотел бы добавить свой собственный контейнер div вокруг него, чтобы я мог контролировать его размер. Я искал другие ответы на этом сайте и в Интернете, и я думаю, что я должен использовать пользовательское наложение , чтобы сделать это, но, глядя на этот код, я понятия не имею, с чего начать. В принципе, я хотел бы вставить что-то вроде этого в качестве маркера 

    <div class = "marker">
      <img src = "images/map-pin.svg" />
    </div>

Как мне это сделать?

1 Ответ

0 голосов
/ 13 января 2019

Оказывается, я могу изменить размер маркера таким образом, чтобы освободить место для анимации: 

    var image = {
      url: 'images/map-marker.svg',
      size: new google.maps.Size(100, 100),
      origin: new google.maps.Point(-20, -20),
      anchor: new google.maps.Point(30, 50),
      scaledSize: new google.maps.Size(30, 30)
   };
...