google-maps-api-3 - Google マップマーカー (Polymer 1.0) としての CSS アニメーション?

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にオプションを設定しません。マップマーカーはデフォルトで最適化を有効にし、アニメーション GIF を防止します。Marker

optimized

最適化により、多くのマーカーが単一の静的要素としてレンダリングされます。最適化されたレンダリングはデフォルトで有効になっています。アニメーション GIF または PNG の最適化されたレンダリングを無効にするか、各マーカーを個別の DOM 要素としてレンダリングする必要がある場合 (高度な使用のみ)。

幸いなことに、このMarkerクラスには、setOptions()インスタンス化後にマーカーオプションを変更するための API があります。マップマーカーの最適化を無効にする方法は次のとおりです。

イベントのイベントリスナーをセットアップして<google-map>.google-map-ready、マーカーにアクセスする前にマップが完全に読み込まれるようにします。
イベントハンドラーで、反復してマップ上のの<google-map>.markers配列を取得します。<google-map-marker>
マーカーごとに、からインスタンスを取得し、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 - Google マップ マーカー (Polymer 1.0) としての CSS アニメーション?

1 に答える 1

Related

Reference

google-maps-api-3 - Google マップマーカー (Polymer 1.0) としての CSS アニメーション?