google-maps-api-3 - CSS 动画作为谷歌地图标记（Polymer 1.0）？

Question

我正在尝试<google-map>使用 web 组件库 Polymer 在自定义元素中创建自定义“地图标记”图标。

我将如何使用动画 GIF？
我将如何使用 CSS 动画？

我都尝试过，但都失败了。

这是我到目前为止所得到的......

        Polymer({
          is: 'css-marker'
        });

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html,
body {
 height: 100%; min-height: 100%; background: #999;
}
main    { width: 90%; min-height: 100%; height: 100%; margin: 0 auto; }
section { background: #fff; width: 44%; min-height: 100%; float: left; margin: 0 .5rem; }
article { padding: 1rem 3rem 0; }
div     { margin:  0 0; text-align: center; }
p       { padding: 1rem; }

h1 { padding: 2rem 0; text-align: center; background: #f2f2f2; font-weight: normal; border-top: 7px solid #999; }
h2 { margin: 2rem 0 .25rem; }

.info { padding: 1rem; }
.google-map { margin: 0 !important; position: relative; width: 100%; height: 300px; }





/* Pulse animation */
figure { text-align: center; height: 50px; position: relative; z-index: 1; }
.pulsate { position: relative; display: inline-block; -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); text-align: center; }
.pulsate:before { content: ""; display: block; background: black; width: 10px; height: 10px; border: 5px solid lime; border-radius: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
.pulsate:after { content: ""; display: block; background: transparent; border: 10px solid lime; border-radius: 60px; height: 50px; width: 50px; position: absolute; top: -25px; left: -25px; opacity: 0; z-index: 1;

    -moz-animation: pulse 1.5s infinite ease-out;
    -webkit-animation: pulse 1.5s infinite ease-out;
    animation: pulse 1.5s infinite ease-out; }


/* Animation */
@-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 pulse {
 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; }
}

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

<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-marker.html">


<dom-module id="css-marker">
  <template>

    <main>

        <!-- GOOGLE MAP
        ------------------------->
        <section>
            <h1>Polymer: Animated GIF map marker?</h1>
            <div class="info">
              <p>This is the same animated GIF image that you see in the map below, but it's not working in the map?</p>
              <img src="http://www.firepineapple.com/application/views/images/map_marker.gif" alt="">
            </div>

            <div class="google-map">
              <google-map 
                disable-default-ui 
                fit-to-markers 
                latitude="30.236045" 
                longitude="-93.314282" 
                zoom="17" 
                api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE" 
                class="hero-image">

                  <google-map-marker 
                    latitude="30.236045" 
                    longitude="-93.314282" 
                    icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
                  </google-map-marker>
              </google-map>
            </div>

        </section>


        <!-- GOOGLE MAP
        ------------------------->
        <section>
            <h1>Polymer: CSS animation map marker?</h1>
            <div class="info">
              <p>The same animation is pasted below inside the map marker, but it's default icon shows up instead?</p>
              <figure>
                <div class="pulsate"></div>
              </figure>
            </div>

            <div class="google-map">
              <google-map 
                disable-default-ui 
                fit-to-markers 
                latitude="30.236045" 
                longitude="-93.314282" 
                zoom="17" 
                api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE" 
                class="hero-image">

                  <google-map-marker latitude="30.236045" longitude="-93.314282">
                    <figure>
                      <div class="pulsate"></div>
                    </figure>
                  </google-map-marker>
              </google-map>
            </div>

        </section>

    </main>

  </template>
</dom-module>




<!-- Custom Element 
---------------------------------------->
<css-marker></css-marker>

score 2 · Accepted Answer

<google-map-marker>optimized创建. _ _ Marker地图标记默认启用优化，这会阻止动画 GIF：

optimized

优化将许多标记呈现为单个静态元素。默认情况下启用优化渲染。禁用动画 GIF 或 PNG 的优化呈现，或者当每个标记必须呈现为单独的 DOM 元素时（仅限高级用法）。

幸运的是，Marker该类有一个setOptions()API 可以在实例化后修改标记选项。以下是禁用地图标记优化的方法：

为事件设置一个事件侦听器，<google-map>.google-map-ready以确保在访问标记之前地图已完全加载。
在事件处理程序中，迭代<google-map>.markers以获取<google-map-marker>地图上的 s 数组。
对于每个标记，Marker从获取实例<google-map-marker>.marker，然后调用setOptions({optimized: false})该实例。

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    listeners: {
      'map.google-map-ready': '_disableMarkerOptimization'
    },
    _disableMarkerOptimization: function() {
      this.$.map.markers.forEach(m => {
        m.marker.setOptions({optimized: false});
      });
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        google-map {
          height: 100vh;
          width: 100vw;
        }
      </style>
      <google-map id="map"
                  disable-default-ui 
                  fit-to-markers 
                  latitude="30.236045" 
                  longitude="-93.314282" 
                  zoom="17" 
                  api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE">

        <google-map-marker latitude="30.236045" 
                           longitude="-93.314282" 
                           icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
        </google-map-marker>
      </google-map>
    </template>
  </dom-module>
</body>

^密码笔

google-maps-api-3 - CSS 动画作为谷歌地图标记（Pol​​ymer 1.0）？

1 回答 1

Related

Reference

google-maps-api-3 - CSS 动画作为谷歌地图标记（Polymer 1.0）？