Добавление звука в массив маркеров - google map javascript

Question

Я здесь новый, поэтому знаю, что у меня нет доверия. Я художник и новичок в программировании, поэтому понимаю, что никто этого не возьмет. Я отправляю это на случай, что это простой вопрос. -S

Это код (в основном с сайта разработчика Google) для создания нескольких маркеров. Он отлично работает и создает пользовательский значок для каждого маркера. Каждый маркер должен воспроизводить другой аудиофайл при щелчке (сейчас создается только последний созданный маркер). Я также хотел бы изменить значок при воспроизведении аудиофайла. Я использую javascript и sound manager 2 для воспроизведения звука, но меня интересует: Как я могу ссылаться на каждый маркер в массиве, чтобы я мог воспроизвести конкретный аудиофайл, назначенный этому конкретному маркеру?

Я надеюсь, что csn сделает это без XML и базы данных. -Sabine

Вот соответствующий код:

setMarkers(map, beaches); 
} 


var beaches = [ 
    ['Devotion', 40.710431,-73.948432, 0], 
['Tester', 40.711223,-73.958416, 1], 
]; 

function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('biker.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(32, 32), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(0, 32) 
    ); 

var newimage = new google.maps.MarkerImage('biker_click.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(32, 32), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(0, 32) 
    ); 

var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
    }; 

    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3], 

    }); 
    } 



function markerClick() { 
    console.log('click'); 
    } 
    google.maps.event.addListener(marker, 'click', markerClick); 

function markerClick() { 
    var playing = sm2.toggle('http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles.mp3', true); 
    if (playing) { 
    this.setIcon(newimage); 
    } else { 
    this.setIcon(image); 
    } 
} 

Answer 1

Что-то вроде этого ..

var beaches = [ 
['Devotion', 40.710431,-73.948432, 0, 'sound1.mp3'], 
['Tester', 40.711223,-73.958416, 1, 'sound2.mp3'], 
]; 

// ... 

    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3], 

    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     playSound(beach[4]); 
    }); 
    } 

Поскольку вы определяете анонимную функцию внутри вашего цикла, он имеет доступ к переменным Петля (в это «закрытие»). Вы добавляете название своего звука к данным, связанным с пляжами, затем передаете его от закрытия к функции (я называю это playSound), что фактически заставляет ее играть.

Надеюсь, что это поможет, это не полный рецепт.

Answer 2

Предположим, у вас есть массив адресов:

var sounds = ["http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles.mp3", 
       "http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles2.mp3"]; 

Тогда вы могли бы попробовать что-то вроде этого:

for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    marker.sound = sounds[i]; //Storing associated sound in marker 
    google.maps.event.addListener(marker, 'click', markerClick); 
} 

И изменить обработчик этого:

function markerClick() { 
    var playing = sm2.toggle(this.sound, true); 
    if (playing) { 
     this.setIcon(newimage); 
    } else { 
     this.setIcon(image); 
    } 
}