使用CSS为Google API地图标记制作动画？ [英] Animate Google API Map Marker with CSS?

问题描述

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 .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）
）; 
  

解决方案

您可以使用第三方库HTML标记。一个选项是 RichMarker ，让HTML / CSS在其中生成脉动圆。 / p>

概念证明小偷

代码段：

  function initialize（）{var map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom： 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>我是平面标记！< / 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 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; / *位置我们的标记* / left：-50px; / *位置我们的标记* / display：block;}。pin {width：20px; height：20px;位置：相对; 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;显示：block;背景：rgba（5，124，255，0.6）; border-radius：50％;不透明度：0; animation：pulsate 2400ms ease-out infinite;} @ keyframes pulsate {0％{transform：scale（0.1）;不透明度：0; } 50％{opacity：1; } 100％{transform：scale（1.2）;不透明度：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 =markerdisplay =hiddenclass =marker> < div class =pin>< / div> < div class =pin-effect>< / div>< / div>  

$ b

http://bluefaqs.com/2016/02/how-to-animate-a-map-location-marker-with-css/ shows a pulsating GPS location blue dot (at the bottom of that page).

Does anyone know how such a particular CSS animation can be shown on an interactive Google API Map, at the user's current GPS location (as opposed to just appearing on a static map)?

I had thought of using How to access Google Maps API v3 marker's DIV and its pixel position? to then position it over the top of the map in a div layer but wasn't sure if that would be the best approach or whether someone had already come up with an alternative.

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

解决方案

You could use one of the third party libraries that allow "HTML" Markers. One option is RichMarker, put the HTML/CSS to generate the pulsating circle in there.

proof of concept fiddle

code snippet:

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>

这篇关于使用CSS为Google API地图标记制作动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！