使用CSS对Google API Map Marker进行动画处理？

Question

http://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/显示了一个脉动的GPS位置蓝点（在该页面的底部）。

有谁知道如何在用户当前的GPS位置（而不是仅显示在静态地图上）在交互式Google API地图上显示这样的特定CSS动画？

我曾考虑过使用“ 如何访问Google Maps API v3标记的DIV及其像素位置？然后将其放置在div层中的地图顶部，但是不确定这是否是最佳方法，或者不确定是否有人已经提出了替代方法。

var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
    Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);

Answer 1

您可以使用允许使用“ HTML”标记的第三方库之一。一个选项是RichMarker，将HTML / CSS放在其中以生成脉动圆。

概念证明

代码段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polyline = new google.maps.Polyline({
    map: map,
    path: []
  })
  var div = document.getElementById("marker"); // document.createElement('DIV');
  // div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';
  var marker2 = new RichMarker({
    map: map,
    position: map.getCenter(),
    draggable: true,
    flat: true,
    anchor: RichMarkerPosition.MIDDLE,
    content: div
  });
  polyline.getPath().push(marker2.getPosition());
  var angle = 0;
  setInterval(function() {
    angle += 5;
    angle %= 360;
    marker2.setPosition(google.maps.geometry.spherical.computeOffset(map.getCenter(), 1000, angle));
    polyline.getPath().push(marker2.getPosition());
  }, 2000);

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.marker {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -50px;
  /*positions our marker*/
  left: -50px;
  /*positions our marker*/
  display: block;
}
.pin {
  width: 20px;
  height: 20px;
  position: relative;
  top: 38px;
  left: 38px;
  background: rgba(5, 124, 255, 1);
  border: 2px solid #FFF;
  border-radius: 50%;
  z-index: 1000;
}
.pin-effect {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  display: block;
  background: rgba(5, 124, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: pulsate 2400ms ease-out infinite;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script>
<div id="map_canvas"></div>
<div id="marker" display="hidden" class="marker">
  <div class="pin"></div>
  <div class="pin-effect"></div>
</div>