Question

我在网上搜索过，但似乎无法找到我的问题的答案。我相信我已经接近但却无法按照预期的方式运作。

我想在谷歌地图上绘制一系列位置，并从DROP动画开始，然后当用户点击一个点时，我希望它能反弹。

我的当前代码执行1/2工作，但是，当您单击它时，我的目标是我的数组中的最后一个值。 BOUNCE动画可以工作，但它似乎不适用于我的数组中的所有值。你能指出我在代码中遗漏的内容吗？

感谢您的帮助！

＆＃13;

<html>
<head>
    <!-- styles put here, but you can include a CSS file and reference it instead! -->
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    // Create a map variable
    var map;
    var markers = [];
    // Function to initialize the map within the map div
    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.74135, lng: -73.99802},
            zoom: 10
        });
        // Create a single latLng literal object.
        var locations = [
            {title: 'Beer', location: new google.maps.LatLng(47.666633, -122.371453)},
            {title: 'Home', location: new google.maps.LatLng(47.613141, -122.320587)},
            {title: 'Work', location: new google.maps.LatLng(47.624812, -122.315134)}
        ];

        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < locations.length; i++) {
            var position = locations[i].location;
            var title = locations[i].title;
            var marker = new google.maps.Marker({
                map: map,
                position: position,
                title: title,
                animation: google.maps.Animation.DROP,
                id: i
            });
            bounds.extend(marker.position);
            google.maps.event.addListener(marker, 'click', function(){
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
//            markers.push(marker);
        }
        map.fitBounds(bounds);
    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&v=3&callback=initMap">
</script>
</body>
</html>

＆＃13;

Answer 1

一种选择是在点击事件监听器功能中使用this来引用点击的标记。

google.maps.event.addListener(marker, 'click', function(){
     if (this.getAnimation() !== null) {
         this.setAnimation(null);
      } else {
         this.setAnimation(google.maps.Animation.BOUNCE);
      }
});

（你也可以使用函数关闭）

Javascript GoogleMaps API动画Onclick for Points of points

1 个答案: