2

私はここに来たばかりなので、信頼性がないことはわかっています。私はアーティストであり、プログラミングは初めてなので、誰もこれを引き受けないかどうかは理解しています. これは簡単な質問です。-S

これは、複数のマーカーを作成するためのコードです (主に Google 開発者サイトから)。正常に機能し、各マーカーのカスタム アイコンを作成します。各マーカーは、クリックすると異なるオーディオ ファイルを再生する必要があります (現時点では、最後に作成されたマーカーのみが再生されます)。オーディオファイルの再生中のアイコンも変更したいと思います。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);
  }
}
4

2 に答える 2

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);
   }
}
于 2012-06-11T20:07:16.900 に答える
0

このようなもの..

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 と呼びます) に渡します。これにより、実際にサウンドが再生されます。

これが役に立てば幸いです。これは完全なレシピではありません。

于 2012-06-11T20:01:26.757 に答える