我正在处理谷歌地图。谷歌地图上有标记的位置列表。
我想要功能,当有人在特定位置上移动时,该位置的标记会反弹。
以下是我正在使用的代码:
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 );
是罪魁祸首,不知怎的,我无法解决。
有没有人可以帮助我解决这个问题。