Question

我正在尝试向自定义地图标记添加脉冲效果。当我将动画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，以便可以控制其大小。我一直在该站点和整个网络上搜索其他答案，我认为我应该使用custom overlay来执行此操作，但是查看该代码，我什至不知道从哪里开始。我基本上想插入像这样的标记

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

我该怎么做？

Answer 1

结果是我可以通过这种方式调整标记的大小，以便为动画腾出空间：

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

在自定义Google地图标记周围添加HTML

1 个答案: