在自定义谷歌地图标记周围添加 HTML答案

【问题标题】：Add HTML around custom google map marker在自定义谷歌地图标记周围添加 HTML
【发布时间】：2019-01-14 01:02:02
【问题描述】：

我正在尝试向自定义地图标记添加脉冲效果。当我将动画 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>

我该怎么做？

【问题讨论】：

标签： google-maps google-maps-markers

【解决方案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)
   };

【讨论】：