Google 地图标记 DROP 动画不一致

我在 Angular 10 中使用谷歌地图 API，我发现切换 DROP 动画存在一些不一致之处。

但是，我的用例是地图上有多个标记，每次单击标记时，它都会掉落（而不是反弹）。我尝试通过向地图添加第二个标记并使用两者的切换来更改 JSFiddle 来完成这项工作。

我找不到很多关于不同动画的

Marker.animation

和

Marker.animating

 属性的文档。我怀疑当标记具有 DROP 动画时，这两个属性在动画完成后设置为 null。

marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))

以上方法不起作用。

0
投票

要让标记再次掉落，请将

map

 属性设置为

null

（将其从地图中删除），然后再次设置动画，并将标记添加到地图中。

marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);

概念证明小提琴

代码片段：

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.07
    },
  });
  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: 59.327,
      lng: 18.067
    },
  });
  marker.addListener("click", function() {
    toggleDrop(map);
  });
}

function toggleDrop(map) {
  marker.setMap(null);
  marker.setAnimation(google.maps.Animation.DROP);
  marker.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Marker Animations</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>

0
投票

在我的特定场景中，在后续点击中似乎具有更好行为的另一个选项是简单地更改为

BOUNCE

，然后返回到

DROP

，而不是从地图中完全删除标记并将其添加回来：

marker.addListener('click', () => {
  marker.setAnimation(google.maps.Animation.BOUNCE);
  requestAnimationFrame(() => {
    marker.setAnimation(google.maps.Animation.DROP);
  });
)

问题描述投票：0回答：2

2个回答

最新问题

Google 地图标记 DROP 动画不一致

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2