将声音添加到标记数组 - 谷歌地图JavaScript

Question

我是新来的，所以我知道我没有任何可信度。我是一名艺术家，也是编程新手，所以我理解如果没有人会接受这个。我发布这个机会，这是一个简单的问题。-S

这是创建多个标记的代码（主要来自谷歌开发者网站）。它工作正常，并为每个标记创建一个自定义图标。单击每个标记时应播放不同的音频文件（现在只有创建的最后一个标记）。我还想在播放音频文件时更改图标。我正在使用javascript和声音管理器2来播放音频 - 但我感兴趣的是：如何引用数组中的每个标记，以便可以播放分配给该特定标记的特定音频文件？

我希望我在没有XML和数据库的情况下做到这一点。-萨宾

以下是相关代码：

  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

假设您有一个 URL 数组：

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);
   }
}

Answer 2

像这样的东西。

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），这实际上会导致它播放。

希望这有帮助，这不是一个完整的食谱。