动画谷歌地图标记
Animate google map markers
我想做一些像这个动画的东西
在这里,当用户单击/悬停在列表中的任何位置上时,相应的位置会以动画方式在地图上突出显示。我怎样才能做到这一点?
我做了一些谷歌,但找不到任何文档。任何人都可以建议一些有用的资源或链接吗?
不幸的是,
您无法使用 css 访问标记对象,因为它不是 DOM 的一部分,它是canvas
的一部分。但是,您可以使用自定义样式的自定义叠加来实现所需的内容。
对于脉冲效果,您可以使用CSS动画。您可以在下面找到一个例子;
body {
padding: 40px;
}
@keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
100% {
transform: scale3d(2.2, 2.2, 1);
opacity: 0;
}
}
#pulse:before, #pulse:after {
animation: 3s ease-out 0s normal none infinite running pulse;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-radius: 24px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) inset;
content:"";
height: 48px;
left: 50%;
margin: -24px 0 0 -24px;
pointer-events: none;
position: absolute;
top: 50%;
width: 48px;
z-index: -1;
}
#pulse:after {
animation-delay: 1.5s;
}
#pulse {
width: 50px;
height: 50px;
background: #ffffff url('http://www.blogher.com/files/imagecache/tiny_thumb/user_pictures/picture-196261.jpg') no-repeat center center;
position: relative;
border-radius: 25px;
text-align: center;
font: bold 14px/50px tahoma;
}
<div id="pulse"></div>
相关文章:
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标,然后在单击另一个图标时切换,等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记,图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map)图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时,每 5 秒在地图上加载一次图钉不会显示图标