setAnimation给出错误

时间:2015-02-19 07:20:16

标签: javascript jquery google-maps google-maps-api-3

我正在处理谷歌地图。谷歌地图上有标记的位置列表。

我想要功能,当有人在特定位置上移动时,该位置的标记会反弹。

以下是我正在使用的代码

function google_map(marker_array){

    // Setup the different icons and shadows

    var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/',

        icons = [
                    iconURLPrefix + 'red-dot.png',
                    iconURLPrefix + 'green-dot.png',
                    iconURLPrefix + 'blue-dot.png',
                    iconURLPrefix + 'orange-dot.png',
                    iconURLPrefix + 'purple-dot.png',
                    iconURLPrefix + 'pink-dot.png',      
                    iconURLPrefix + 'yellow-dot.png'
                ],

        iconsLength = icons.length;

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 10,
                center: new google.maps.LatLng(-37.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                streetViewControl: false,
                panControl: false,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                }
            }),

        infowindow = new google.maps.InfoWindow({
                maxWidth: 160
            });

    var markers = new Array(),

        iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < marker_array.length; i++) {

        var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(marker_array[i].latitude, marker_array[i].longitude),
                        map: map,
                        icon: icons[iconCounter]
                    });

        markers.push(marker);
        var content_info    =   '<div class="siteNotice" id="content">' +
                                '<h1 id="firstHeading" class="firstHeading"><a href="?page_id=582&store_id='+marker_array[i].id+'">'+marker_array[i].content+'</a></h1>'+
                                '</div>';

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(marker_array[i].content);
                infowindow.open(map, marker);
            }
        })(marker, i));

        iconCounter++;

        // We only have a limited number of possible icon colors, so we may have to restart the counter
        if(iconCounter >= iconsLength) {
            iconCounter = 0;
        }
    }

    function autoCenter() {
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        for (var i = 0; i < markers.length; i++) {  
            bounds.extend(markers[i].position);
        }
        //  Fit these bounds to the map
        map.fitBounds(bounds);
    }

    autoCenter();   

}

google_map(store_details);

上面的代码工作得很好。但是当我尝试setAnimation时,它给了我错误

未捕获的TypeError:undefined不是函数

$( "#wpsl-stores" ).on( "mouseenter", "li", function() {
    //console.log($( '.lstore' ).data( "store-id" ));
    letsBounce( $(this).find('.lstore').data("store-id"), "start" );
});

$( "#wpsl-stores" ).on( "mouseleave", "li", function() {    
    letsBounce( $(this).find('.lstore').data("store-id"), "stop" );
});


function letsBounce( storeId, status ) {
    var i, len, animation = "";

    if ( status == "start" ) {
        animation = google.maps.Animation.BOUNCE;       
    } else {
        animation = null;   
    }
    /* Find the correct marker to bounce based on the storeId */
    for ( i = 0, len = store_details.length; i < len; i++ ) {

        if ( store_details[i].id == storeId ) {
            marker = store_details[i];
            marker.setAnimation( animation );//In this line
        }
    }   
}

marker.setAnimation( animation );是罪魁祸首,不知怎的,我无法解决。

有没有人可以帮助我解决这个问题。

0 个答案:

没有答案