Question

在谷歌地图标记中，我可以这样做。自定义发生在icon：[]但我想在css文件中自定义。

var marker = new google.maps.Marker({
  //animation: google.maps.Animation.BOUNCE,

  map: map,
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8.5,
    fillColor: "#ff0000",
    fillOpacity: 0.6,
    strokeWeight: 0.4,

  },
})

但如果我想像这样做css样式来为标记设置动画，该怎么办呢？在HTML中我可以做class =＆＃39; classname＆＃39;并转到CSS设置.classname但在javascript中我不知道如何。

.marker {
margin-top: 20px;
    margin-left: 30px;
    position: relative;
}

.pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #ffb3b3;

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #ff4d4d;
    z-index: 10;
    position: absolute;
}

.dot {
position: absolute;
height: 50px;
    width: 50px;
    top: -25px;
    left: -25px;
    z-index: 2;
    opacity: 0;
    border: 10px solid #ffe6e6;;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    -webkit-animation: flash 2s ease-out;
    -moz-animation: flash 2s ease-out;
    animation: flash 2s ease-out;
-webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
 }

 @-moz-keyframes pulse {
 0% {-moz-transform: scale(0);opacity: 0.0;}
 25% {-moz-transform: scale(0);opacity: 0.1;}
 50% {-moz-transform: scale(0.1);opacity: 0.3;}
 75% {-moz-transform: scale(0.5);opacity: 0.5;}
 100% {-moz-transform: scale(1);opacity: 0.0;}
 }

 @-webkit-keyframes "flash" {
 0% {-webkit-transform: scale(0);opacity: 0.0;}
 25% {-webkit-transform: scale(0);opacity: 0.1;}
 50% {-webkit-transform: scale(0.1);opacity: 0.3;}
 75% {-webkit-transform: scale(0.5);opacity: 0.5;}
 100% {-webkit-transform: scale(1);opacity: 0.0;}
}

是否可以将CSS添加到javascript以及如何？我的完整代码：https://drive.google.com/open?id=1XQEiuQJkBHnO2fX9hDWApfMtwTCYZpDq

这是我想要的结果。 result

如何将CSS添加到谷歌地图标记？

0 个答案: