javascript - panTo() 方法干扰 Google Maps Javascript API 中的弹跳动画
问题描述
我正在实现一个相对简单的谷歌地图,其中有各种标记。我正在向标记添加一个侦听器,以便在单击时它会上下弹跳,并且地图会平移到它。
预期的行为是您单击一个引脚并弹跳,再次单击它并停止。此外,如果您单击一个大头针,然后单击另一个大头针,第一个停止弹跳,第二个开始。很直观。
然而,发生的事情是它在引脚之间“来回”两三个后停止工作。我已经缩小了地图平移到图钉 (panTo()) 的行为的罪魁祸首。如果我删除它,它工作得很好。
附加的代码重现了该问题。如果您使用 panTo() 方法注释该行,您可以看到它是如何正常工作的。
关于为什么会发生这种情况以及如何解决它的任何想法?
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
let map;
markers = [];
positions = [
{lat : 50.46818409999999, lng: 30.5252753},
{lat : 50.46220959999999, lng: 30.5153674},
];
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 50.462, lng: 30.514 },
zoom: 12,
});
dropmarkers();
};
function dropmarkers() {
for (let i = 0; i < positions.length; i++) {
window.setTimeout(() => {
var marker = new google.maps.Marker({
position: {lat: positions[i]['lat'], lng: positions[i]['lng']},
animation: google.maps.Animation.DROP
});
markers.push(marker);
marker.addListener("click", function () {
toggleAnimation(marker);
map.panTo({lat: positions[i]['lat'], lng: positions[i]['lng']});
map.setZoom(14);
});
marker.setMap(map);
}, i * 200);
};
};
function toggleAnimation(marker) {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
for (var j = 0; j < markers.length; j++) {
markers[j].setAnimation(null);
}
marker.setAnimation(google.maps.Animation.BOUNCE);
};
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
解决方案
推荐阅读
- java - 是否可以在java中阻止打印调用?
- python - Tweepy 阻止用户在其简历中使用特定单词
- c# - 为什么有数据时我的 SerialPorts.GetPortNames() 会出现异常错误“无数据可用”?
- mysql - 转储与 postgres 兼容的远程 mysql 数据库
- r - R data.table - lapply的替代品?
- vb.net - 无法将“system.object”类型的对象转换为“Microsoft.Office.Interop.Outlook.Folder”类型
- c++ - 二叉搜索树--插入一个节点
- python-3.x - 如何从另一个数据框中更新带有集合的熊猫数据框
- javascript - 为什么时间戳不保存到 React 状态对象?
- c++ - 基于网格的 wumpus 世界。这是作为作业交给我的,我对空格感到困惑