如何添加自定义动画在谷歌地图V3标记，当我把每个标记逐一？ [英] How to add custom animation on Google Map V3 Marker when I drop each marker one by one?

查看：248
本文介绍了如何添加自定义动画在谷歌地图V3标记，当我把每个标记逐一？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

删除每个标记一个接一个在谷歌地图V3的这是我的简单工作的例子。 我已经设置了删除动画时，标记将被添加到谷歌地图。

不过，我想自定义与动画渐变的下降将有可能使用任何JavaScript的东西或其他的库？

谷歌已经在命名空间这个选项，我们可以添加我们的自定义动画选项的命名空间？

  • google.maps.Animation.DROP
  • google.maps.Animation.BOUNCE
  • google.maps.Animation.CUSTOM_FADE（这可能吗？）

我的工作$ C $下谷歌地图V3 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
  ＆LT; META HTTP-当量=内容类型内容=text / html的;字符集= UTF-8/＆GT;
  ＆LT;冠军＆GT;谷歌地图多个标记＆LT; /标题＆GT;
  ＆所述;脚本的src =htt​​p://maps.google.com/maps/api/js?sensor=false
          类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
  ＆LT; D​​IV ID =地图的风格=宽度：500px的;高度：400像素;＆GT;＆LT; / DIV＆GT;

  ＆LT;脚本类型=文/ JavaScript的＆GT;
    VAR位置= [
      ['邦迪海滩，-33.890542，151.274856，4]
      ['Coogee海滩，-33.923036，151.259052 5]
      ['克罗纳拉海滩，-34.028249，151.157507，3]
      ['曼利海滩，-33.80010128657071，151.28747820854187，2]
      ['马鲁巴海滩，-33.950198，151.259302，1]
    ]。

    VAR地图=新google.maps.Map（的document.getElementById（地图），{
      变焦：10，
      中心：新google.maps.LatLng（-33.92，151.25），
      mapTypeId：google.maps.MapTypeId.ROADMAP
    }）;

    VAR信息窗口=新google.maps.InfoWindow（）;

    VAR的标记，我;

    功能标记（ⅰ）{
        如果（I＆GT; locations.length）回报;

        VAR标记;

        标记=新google.maps.Marker（{
            位置：新google.maps.LatLng（位置[I] [1]，位置[I] [2]），
            动画：google.maps.Animation.DROP，
            地图：地图
            }）;

        变种吨= setTimeout的（标记（+第（i + 1）+），500）;
    }
    标记（0）;

  ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

下面是多远，我已经得到了。 谷歌地图API增加了页面上的CSS关键帧片段从的http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,util,marker%7D.js

在页面内它看起来像这样

  @  -  WebKit的关键帧_gm2657 {
0％{
    -webkit-变换：translate3d（0px，0px，0）; -webkit-动画定时功能：缓解出;
}
50％{
    -webkit-变换：translate3d（0px，-20px，0）; -webkit-动画定时功能：易用性的;
}
100％{
    -webkit-变换：translate3d（0px，0px，0）; -webkit-动画定时功能：缓解出;
}

}

在那里的功能融为一体pressed到

 函数UJ（A，B）{
变种C = [];
C [A]（@  -  WebKit的关键帧，B{\\ N）;
K（A·B，函数（）{
    C [A]（100 * A [$ k]的％{）;
    C [A]（ -  WebKit的变换：translate3d（一[的Fv] [0]，PX，一个[的Fv] [1]，PX，0）;）;
    C [A]（ -  WebKit的动画定时功能：a.wa，）;
    能够）
}）;
能够）;
回报C [麦当劳]（）
}

我不能挖通的更多，现在要弄清楚如何攻入该对象。

麻烦的是，我不知道他们是如何建立一个关键帧动画的名字。我就得到了以广告=_克+ 1 [B]（1E4 * L [QB（））从上面的文件，但好运气跟踪的一回了一下L [B]是或等于什么对象1E4 * L，或如何QB的定义。

我的下一个路线是刮的HTML含@ -webkit-关键帧_gm脚本标记，看看有关提取使用的号码，然后用它来编写自己的关键帧动画，并希望谷歌地图使用您的注入CSS代替自身

沿着这一思路我写了一个小的jQuery的方法来搜索与样式的所有属性的div部分一致_gm。

  VAR调查;
VAR ntrvl =的setInterval（函数（）{
    民调= $（DIV [风格* ='_gm']）;
    如果（poll.length大于0）{
        craftNewAnimation（poll.css（ -  WebKit的动画名'））;
        clearInterval（ntrvl）;
    }

}，10）;

功能craftNewAnimation（名字）{
    的console.log（名称）;
    VAR的标记= ['＆LT;风格＆GT;'，
        @ -webkit-关键帧+名字+'{'，
        0％{不透明度：0; }'，
        '100％{不透明度：1; }'，
        '}'，
        '＆LT; /风格'
    ]。
    $（身体）追加（markup.join（））。
}

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

它不会取代它的第一个检测的动漫出于某种原因。而且可能还有其他的方式来获取魔法关键帧的名字没有这么多的黑客攻击。

祝你好运。

This my simple working example of Drop each marker one-by-one on Google map V3. I have set the Drop Animation when marker is added to Google Map.

But I want to customize the Drop with Fade Animation will it possible using any Javascript Stuff or other library?

Google has this options in Namespace Can we add our Custom animation options in Namespace?

  • google.maps.Animation.DROP
  • google.maps.Animation.BOUNCE
  • google.maps.Animation.CUSTOM_FADE ( Is it possible ? )

My Working Code for Google map 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>

解决方案

Here is how far I've gotten. Google Maps API adds a CSS Keyframe snippet on the page from inside of http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,util,marker%7D.js

inside the page it looks something like this

@-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;
}

}

The function in there is compressed to 

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]("")
}

I can't dig through that any more right now to figure out how to hack into that object.

The trouble is that I don't know how they build that keyframe animation name. I've gotten as far as a.d="_gm"+l[B](1E4*l[Qb]()) from the file above, but good luck tracking that one back up to what l[B] is or what object 1E4*l equates to, or how Qb is defined.

My next route would be to scrape the HTML for script tags containing @-webkit-keyframes _gm and see about extracting the number used, then using it to write your own keyframe animation, and hope that google maps uses your injected CSS instead of its own.

Along those lines I wrote a little jQuery method to search for all divs with a style attribute partially matching "_gm".

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

It doesn't replace the first one it detect's animation for some reason. And there might be other ways to get that magic keyframe-name without so much hacking.

Good luck.

这篇关于如何添加自定义动画在谷歌地图V3标记，当我把每个标记逐一？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆