Question

我一直在玩谷歌地图javascript，并希望有人可以帮助我让我的标记反弹。我有一系列标记，我希望通过链接，div或标题（h1）的onmousehover，我可以使特定的标记反弹。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: -37.800426,
            lng: 145.038494
        }
    });
    setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.

var stores = [
    ['A', -37.771624, 144.888128, 1],
    ['B', 37.843956, -144.994875, 2],
    ['C', -37.818086, 144.995699, 3],
    ['D', 37.812697, -145.229200, 4],
];

function setMarkers(map) {
    // Adds markers to the map.
    for (var i = 0; i < stores.length; ++i) {
        var store = stores[i];
        var marker = new google.maps.Marker({
            position: {
                lat: store[1],
                lng: store[2]
            },
            map: map,
            animation: google.maps.Animation.DROP,
            title: store[0],
            zIndex: store[3],
        });
        attachStoreTitle(marker);
    }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachStoreTitle(marker, storeName) {
    var infowindow = new google.maps.InfoWindow({
        content: marker.title
    });

    marker.addListener('click',
        function() {
            infowindow.open(marker.get('map'), marker);
        });
}

我与听众的另一个主要问题是调用正确的标记，考虑到所有数据都在数组中。

Answer 1

此处记录了标记动画：Google Maps Marker Animations

您可以添加以下方法：

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

现在为你的for循环中的每个标记添加一个点击监听器：

marker.addListener('click', toggleBounce);

如果您想在悬停时调用退回，请改为添加mouseover侦听器。

可以找到其他事件here

Google Maps Javascript - 让Marker Bounce

1 个答案: