Question

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

是否有人知道如何在用户当前GPS位置的交互式Google API地图上显示此类特定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)
);

Answer 1

您可以使用其中一个允许＆＃34; HTML＆＃34;标记。一个选项是RichMarker，将HTML / CSS放在那里生成脉动圈。

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用CSS动画Google API地图标记？

1 个答案: