使用 CSS 动画 Google API 地图标记？ [关闭]答案

【问题标题】：Animate Google API Map Marker with CSS? [closed]使用 CSS 动画 Google API 地图标记？ [关闭]
【发布时间】：2017-02-28 06:19:36
【问题描述】：

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

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

我曾想过使用 How to access Google Maps API v3 marker's DIV and its pixel position? 将其放置在地图顶部的 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)
);

【问题讨论】：

标签： javascript css google-maps google-maps-api-3

【解决方案1】：

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

proof of concept fiddle

代码 sn-p：

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>

【讨论】：