web-dev-qa-db-ja.com

各マーカーを1つずつドロップしたときに、Google Map V3マーカーにカスタムアニメーションを追加するにはどうすればよいですか？

これは、GoogleマップV3に各マーカーを1つずつドロップする簡単な作業例です。マーカーをグーグルマップに追加した時にドロップアニメーションを設定しました。

しかし、フェードアニメーションでドロップをカスタマイズしたいのですが、Javascriptスタッフや他のライブラリを使用して可能ですか？

Googleにはこのオプションが名前空間にあります。名前空間にカスタムアニメーションオプションを追加できますか？

  • google.maps.Animation.DROP
  • google.maps.Animation.BOUNCE
  • google.maps.Animation.CUSTOM_FADE（それは可能ですか？）

GoogleマップV3のマイワーキングコード

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    function marker(i) {
        if (i > locations.length) return;

        var marker;

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            animation: google.maps.Animation.DROP,
            map: map
            });

        var t=setTimeout("marker("+(i+1)+")",500);
    }
    marker(0);

  </script>
</body>
</html>
javascriptandroidjquerygoogle-mapsgoogle-maps-api-3
14
Ashwin Parmar

ここに私がどこまで来たかです。 Google Maps APIは http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,utilの中からページにCSSキーフレームスニペットを追加します、marker％7D.js

ページ内はこんな感じ

_@-webkit-keyframes _gm2657 {
0 % {
    -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out;
}
50 % {
    -webkit-transform: translate3d(0px, -20px, 0); -webkit-animation-timing-function: ease-in ;
}
100 % {
    -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out;
}
_

}

そこの関数は圧縮されます

_function uJ(a, b) {
var c = [];
c[A]("@-webkit-keyframes ", b, " {\\n");
K(a.b, function (a) {
    c[A](100 * a[$k], "% { ");
    c[A]("-webkit-transform: translate3d(", a[Fv][0], "px,", a[Fv][1], "px,0); ");
    c[A]("-webkit-animation-timing-function: ", a.wa, "; ");
    c[A]("}\\n")
});
c[A]("}\\n");
return c[Mc]("")
}
_

そのオブジェクトをハッキングする方法を理解するために、これ以上掘り下げることはできません。

問題は、キーフレームアニメーションの名前がどのように作成されているのかがわからないことです。上記のファイルからa.d="_gm"+l[B](1E4*l[Qb]())まで取得しましたが、l [B]が何であるか、1E4 * lがどのオブジェクトに等しいか、またはQbがどのように定義されているかを追跡して頑張ってください。

私の次のルートは、@-webkit-keyframes _gmを含むスクリプトタグのHTMLをスクレイピングし、使用された数の抽出について確認し、それを使用して独自のキーフレームアニメーションを記述し、Googleマップが独自のCSSではなく、注入されたCSSを使用することを期待します。

これらの行に沿って、「_ gm」に部分的に一致するスタイル属性を持つすべてのdivを検索するための小さなjQueryメソッドを書きました。

_var poll;
var ntrvl = setInterval(function () {
    poll = $("div[style*=' _gm']");
    if (poll.length > 0) {
        craftNewAnimation(poll.css('-webkit-animation-name'));
        clearInterval(ntrvl);
    }

}, 10);

function craftNewAnimation(name) {
    console.log(name);
    var markup = ['<style>',
        '@-webkit-keyframes ' + name + ' {',
        '0%{ opacity: 0; }',
        '100%{ opacity: 1; }',
        '}',
        '</style'
    ];
    $('body').append(markup.join(""));
}
_

http://jsbin.com/uJAdaJA/3/edit

何らかの理由で、最初に検出したアニメーションを置き換えません。そして、それほどハッキングすることなくその魔法のキーフレーム名を取得する他の方法があるかもしれません。

幸運を。

4
Cmndo
    var locations = [
      ['Surat', 21.205386, 72.847301, 4],
      ['Mumbai', 19.068789, 72.870265, 5]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(20.120783, 71.8517917),
      mapTypeId: google.maps.MapTypeId.ROADMAP,

    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        animation: google.maps.Animation.BOUNCE,    
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
        var bounds = new google.maps.LatLngBounds();
// in the marker-drawing loop:
bounds.extend(pos);
// after the loop:
map.fitBounds(bounds);
2
Hussy Borad

Googleの豊富なマーカーユーティリティ を使用して、HTML要素をマーカーとして使用できます。今、あなたは好きなように要素にCSSアニメーションを与えることができます。 daneden's Animate.css を使用します。

例：

    var pictureLabel = document.createElement("img");
    pictureLabel.src = YOUR_SOURCE;
    pictureLabel.width = SOME_WIDTH;
    pictureLabel.height = SOME_HEIGHT;
    // daneden even got the exact animation your'e looking for :)
    pictureLabel.className = pictureLabel.className + " animated fadeInDown";

    var marker = new RichMarker({
    position: new google.maps.LatLng(YOUR_LAT, YOUR_LNG),
        map: YOUR_MAP,
        content: pictureLabel
    });

Googleのリッチマーカーを使用する場合は、忘れずに クリックバグ修正を使用してください

2
user3687289