Question

正如标题所示，BOUNCE动画在地图上不起作用，但是我确定它必须以这种方式起作用。您能帮我弄清楚我哪里错了吗？这是我用来在地图上添加标记的代码片段

this.addMarker = function(lat, lng, url, title, icon, shadow, body, full_address, animation) {
        if(lat == 0.0) return;

    var latLng = new google.maps.LatLng(lat, lng); 
    var zIndex = 99999 + this.numMarkers;

    var markerOptions = {
        position: latLng, 
        map: this.map,
        linkURL: '',
        zIndex: zIndex,
       // animation: "",//google.maps.Animation.BOUNCE,
        title: title,
        full_address: full_address
    };
    google.maps.event.addListener(markerOptions, "mouseover", up)

    function up(){
        if(typeof animation == "undefined"){
            markerOptions.animation = google.maps.Animation.BOUNCE;
        } else {
            markerOptions.animation = null;
        }
    }
    if(typeof icon !== "undefined" && icon.length > 0) markerOptions.icon = icon;
        else if(this.icon) markerOptions.icon = this.icon;

    // console.log(markerOptions); 

    if(typeof shadow !== "undefined" && shadow.length > 0) markerOptions.shadow = shadow; 
        else if(this.shadow.length > 0) markerOptions.shadow = this.shadow; 

    var marker = new google.maps.Marker(markerOptions); 

    var infowindow = new google.maps.InfoWindow({
        content: '<div class="gmaps-box" style="width: 100%;"><h5>'+title+'</h5><p>'+body+'</p></div>'
    }); 

    if(url.length > 0) marker.linkURL = url;
    if(this.hoverBox) marker.hoverBoxTitle = title; 
        else marker.setTitle(title); 

    this.markers[this.numMarkers] = marker;
    this.numMarkers++;

    if(marker.linkURL.length > 0) {
        google.maps.event.addListener(marker, 'click', function(e) {
            // window.location.href = marker.linkURL; 
            infowindow.open(this.map, marker);

        }); 
    }
    if(markerOptions.icon !== "undefined" && this.iconHover) {
        var iconHover = this.iconHover; 
        google.maps.event.addListener(marker, 'mouseover', function(e) {
            marker.setIcon(iconHover); 
        });
        google.maps.event.addListener(marker, 'mouseout', function(e) {
            marker.setIcon(markerOptions.icon); 
        }); 
    }

    if(this.hoverBox) {

        var $hoverBox = this.hoverBox; 
        var offsetTop = this.hoverBoxOffsetTop;
        var offsetLeft = this.hoverBoxOffsetLeft; 

        var mouseMove = function(e) {
            $hoverBox.css({
                'top': e.pageY + offsetTop,
                'left': e.pageX + offsetLeft
            });
        }; 

        // console.log($hoverBox); 

        google.maps.event.addListener(marker, 'mouseover', function(e) {
            this._currentURL = url;
            $hoverBox.html("<span>" + marker.hoverBoxTitle + "</span>")
                .css('top', '0px')
                .css('left', '0px')
                .css('display', 'block')
                .css('width', 'auto')
                .css('z-index', 9999); 
            $hoverBox.show();

            $(document).mousemove(mouseMove); 
        }); 

        google.maps.event.addListener(marker, 'mouseout', function(e) {
            $hoverBox.hide();
            $(document).unbind("mousemove", mouseMove);
        }); 

    }
}

结果应如下所示：https://jsfiddle.net/api/post/library/pure/

Answer 1

为使事情简单而不用担心范围，您可以尝试调用函数本身，而不用在up中调用addEventListener：

google.maps.event.addListener(markerOptions, "mouseover", function(){
        if(typeof animation == "undefined"){
            markerOptions.animation = google.maps.Animation.BOUNCE;
        } else {
            markerOptions.animation = null;
        }
    });

BOUNCE动画在地图上不起作用

1 个答案: