谷歌地图标记动画的IE问题答案

【问题标题】：IE Issue of Google Maps Marker Animation谷歌地图标记动画的IE问题
【发布时间】：2014-03-17 17:59:46
【问题描述】：

我正在使用谷歌地图 api v3。我正在尝试运行以下代码，它适用于除 IE 之外的所有浏览器。

您能否建议在 IE 中工作所需的任何更改。

我的代码是：

          var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      var markers = [];

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        from1 = new google.maps.LatLng(0,0);
        to1 = new google.maps.LatLng(30,12);

        from2 = new google.maps.LatLng(-30,15);
        to2 = new google.maps.LatLng(10,-100);

        from3 = new google.maps.LatLng(0,-50);
        to3 = new google.maps.LatLng(0,50);

        addMarker(from1,to1);
        addMarker(from2,to2);
        addMarker(from3,to3);
      }

      function addMarker(pos, dest) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos,
          destination: dest
        });

        google.maps.event.addListener(marker, 'click', function(event) {
          fromLat = this.position.lat();
          fromLng = this.position.lng();
          toLat = this.destination.lat();
          toLng = this.destination.lng();

          // store a LatLng for each step of the animation
          frames = [];
          for (var percent = 0; percent < 1; percent += 0.01) {
            curLat = fromLat + percent * (toLat - fromLat);
            curLng = fromLng + percent * (toLng - fromLng);
            frames.push(new google.maps.LatLng(curLat, curLng));
          }

          move = function(marker, latlngs, index, wait, newDestination) {
            marker.setPosition(latlngs[index]);
            if(index != latlngs.length-1) {
              // call the next "frame" of the animation
              setTimeout(function() { 
                move(marker, latlngs, index+1, wait, newDestination); 
              }, wait);
            }
            else {
              // assign new route
              marker.position = marker.destination;
              marker.destination = newDestination;
            }
          }

          // begin animation, send back to origin after completion
          move(marker, frames, 0, 20, marker.position);
        });

        markers.push(marker);
      }
google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

在什么情况下它在 IE 中不起作用？意外结果，javascript 错误，...？
我在 PUSH 附近遇到错误..
@duncan 我试过这个jsfiddle.net/yV6xv/3782 来避免推送.. 它正在工作.. 但是标记消失了..

标签： javascript jquery internet-explorer google-maps-api-3 google-maps-markers

【解决方案1】：

经过一番摆弄之后，它看起来像是一个打字问题。因为您没有将变量 frames 隐式声明为 var 即不确定它是一个数组，因此错误“对象不支持方法推送”。

你只需要改变：

frames = [];

到：

var frames = [];

在 ie 8-10 测试。

【讨论】：