如何在谷歌地图中心显示点动画？ [英] How to display dot animation on google maps center?
本文介绍了如何在谷歌地图中心显示点动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在地图中心（用户位置）显示一个由CSS创建的脉动点动画。这里是我提到的例子 https://codepen.io/anon/pen/ZGvavq
a
https://codepen.io/anon/pen/ GdJXgj
HTML：
< html lang = EN >
< head>
< meta charset =utf-8/>
< title>< / title>
< link rel =stylesheethref =reset.css/>
< link rel =stylesheethref =style.css/>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
<！ - [if IE]>
< script src =https://html5shiv.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< / head>
< body>
< div class =custom-gmap-classstyle =z-index：1>< / div>
< div class =dot>
< div class =centraldotstyle =z-index：2>< / div>
< div class =wavestyle =z-index：3>< / div>
< div class =wave2style =z-index：4>< / div>
< / div>
< / body>
< / html>
CSS：
html，
body，
.custom-gmap-class {
height：100％;
宽度：100％;
margin：0px;
padding：0px;
位置：绝对;
}
.dot {
margin：auto auto;
width：300px;
height：300px;
职位：亲属;
}
.centraldot {
width：6px;
height：6px;
背景：rgba（32,150,243,1）;
border-radius：30px;
位置：绝对;
left：147px;
top：147px;
动画：animationDotCentral线性3s;
transform-origin：50％50％;
animation-fill-mode：forwards;
animation-iteration-count：infinite;
}
.wave {
width：260px;
height：260px;
背景：rgba（32,150,243,0.4）;
border-radius：200px;
位置：绝对;
left：20px;
top：20px;
opacity：0;
animation：animationWave cubic-bezier（0，.54，.53,1）3s;
transform-origin：50％50％;
animation-fill-mode：forwards;
动画延迟：0.9s;
animation-iteration-count：infinite;
}
.wave2 {
width：260px;
height：260px;
背景：rgba（32,150,243,0.4）;
border-radius：200px;
位置：绝对;
left：20px;
top：20px;
opacity：0;
animation：animationWave cubic-bezier（0，.54，.53,1）3s;
transform-origin：50％50％;
animation-fill-mode：forwards;
animation-delay：1.07s;
animation-iteration-count：infinite;
}
@keyframes animationDotCentral {
0％{transform：scale（0）;不透明度：0; }
5％{transform：scale（2）; }
10％{transform：scale（0.90）;不透明度：1; }
11％{transform：scale（1.50）; }
12％{transform：scale（1.00）; }
28％{background：rgba（32,150,243,1）; }
29％{background：rgba（255,255,255,1）; }
31％{background：rgba（32,150,243,1）; }
33％{background：rgba（255,255,255,1）; }
35％{background：rgba（32,150,243,1）; }
90％{opacity：1; }
100％{opacity：0; }
}
@keyframes animationWave {
0％{opacity：0;变换：比例（0.00）; }
1％{opacity：1; }
10％{background：rgba（32,150,243,0.4）; }
100％{transform：scale（1）;背景：rgba（32,150,243,0.0）;
脚本：
var geocoder;
var map;
函数initialize（）{
var map = new google.maps.Map（
document.getElementsByClassName（custom-gmap-class）[0]，{
center：new google.maps.LatLng（37.4419，-122.1419），
zoom：13，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
google.maps.event.addDomListener（window，load，initialize）;
I want to display a pulsating dot animation which is made with CSS on the map center (user location). Here is the example I am referring to https://codepen.io/anon/pen/ZGvavq
a
解决方案 How 'bout this... I just added jscript to draw a map and used z-index to put your animated dot on top of it...
https://codepen.io/anon/pen/GdJXgj
HTML:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="custom-gmap-class" style="z-index:1"></div>
<div class="dot">
<div class="centraldot" style="z-index:2"></div>
<div class="wave" style="z-index:3"></div>
<div class="wave2" style="z-index:4"></div>
</div>
</body>
</html>
CSS:
html,
body,
.custom-gmap-class {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
position: absolute;
}
.dot{
margin: auto auto;
width: 300px;
height: 300px;
position: relative;
}
.centraldot{
width: 6px;
height: 6px;
background: rgba(32,150,243,1);
border-radius: 30px;
position: absolute;
left:147px;
top:147px;
animation: animationDotCentral linear 3s;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
}
.wave{
width: 260px;
height: 260px;
background: rgba(32,150,243,0.4);
border-radius: 200px;
position: absolute;
left:20px;
top:20px;
opacity: 0;
animation: animationWave cubic-bezier(0,.54,.53,1) 3s;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay:0.9s;
animation-iteration-count: infinite;
}
.wave2{
width: 260px;
height: 260px;
background: rgba(32,150,243,0.4);
border-radius: 200px;
position: absolute;
left:20px;
top:20px;
opacity: 0;
animation: animationWave cubic-bezier(0,.54,.53,1) 3s;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
animation-delay:1.07s;
animation-iteration-count: infinite;
}
@keyframes animationDotCentral{
0% {transform: scale(0) ; opacity: 0; }
5% {transform: scale(2) ; }
10% { transform: scale(0.90) ; opacity: 1; }
11% { transform: scale(1.50) ; }
12% { transform: scale(1.00) ; }
28% {background: rgba(32,150,243,1); }
29% {background: rgba(255,255,255,1); }
31% { background: rgba(32,150,243,1); }
33% { background: rgba(255,255,255,1); }
35% { background: rgba(32,150,243,1); }
90%{ opacity: 1; }
100% { opacity: 0; }
}
@keyframes animationWave{
0% { opacity: 0; transform: scale(0.00); }
1% { opacity: 1; }
10% { background: rgba(32,150,243,0.4); }
100% { transform: scale(1) ; background: rgba(32,150,243,0.0); }
}
Script:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementsByClassName("custom-gmap-class")[0], {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window,"load", initialize);
这篇关于如何在谷歌地图中心显示点动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
