Javascript 用CSS制作谷歌API地图标记动画？

显示脉动GPS位置蓝点（在该页底部）

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

我曾想过使用，然后将其定位在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)
);

---

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

代码片段：

函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var polyline=新的google.maps.polyline({
地图：地图，
路径：[]
})
var div=document.getElementById（“标记”）；//document.createElement（“div”）；
//div.innerHTML='我是平面标记！'；
var marker2=新的RichMarker({
地图：地图，
位置：map.getCenter（），
真的，
平：是的，
主播：RichMarkerPosition.MIDDLE，
目录：div
});
polyline.getPath（）.push（marker2.getPosition（））；
var角=0；
setInterval（函数（）{
角度+=5；
角度%=360；
marker2.setPosition（google.maps.geometry.spheremic.computeOffset（map.getCenter（），1000，angle））；
polyline.getPath（）.push（marker2.getPosition（））；
}, 2000);
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
.马克{
宽度：100px；
高度：100px；
位置：绝对位置；
顶部：-50px；
/*定位我们的标记*/
左：-50px；
/*定位我们的标记*/
显示：块；
}
.别针{
宽度：20px；
高度：20px；
位置：相对位置；
顶部：38px；
左：38px；
背景：rgba（5124255,1）；
边框：2倍实心#FFF；
边界半径：50%；
z指数：1000；
}
.针效应{
宽度：100px；
高度：100px；
位置：绝对位置；
排名：0；
显示：块；
背景：rgba（5124255,0.6）；
边界半径：50%；
不透明度：0；
动画：脉动2400ms，舒缓无限；
}
@关键帧跳动{
0% {
变换：比例（0.1）；
不透明度：0；
}
50% {
不透明度：1；
}
100% {
转换：比例（1.2）；
不透明度：0；
}
}