2016-03-28 15 views
-1

Ich versuche, eine Website für Schulprojekt zu tun, und ich habe diesen Prototyp ich möchte Sound setzen auf differnt Standorten Googlemap api mit ich es schon getan, aber der Ton nicht zu stoppen, wenn Sie anderen Ton spielen ... können wir versuchen, mir zu helfen. ich bin Neuling in diesem sorry für mein EnglischSound auf Google Maps Code

<!DOCTYPE html> 
<html> 
<head> 
<title>Sound Map</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://mm1.ellieirons.com/sm2.js"></script> 

<style> 
/* CSS to define the size and style of the map: */ 
#map { 
    width: 500px; 
    height: 500px; 
    padding: 15px; 
    margin: 15px; 
} 

</style> 
</head> 
<body> 
<!-- HTML creating a div to hold the map: --> 
<div id="map"></div> 
<!-- JavaScript to pull in the Google Maps API: --> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<!-- JavaScript to create the variable "map", and set its zoom, location and map type --> 
<script> 
var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 5, 
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point 
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP 
}); 
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png"); 
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png"); 
var marker1_edm = new google.maps.Marker({ 
position: new google.maps.LatLng(40.821523, -73.949661), 
map: map, 
icon: offIcon 
}); 

marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3'; 
function markerClick1() { 
var audio1 = document.createElement('audio'); 
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3'; 
audio1.play(); 
} 
var marker2_nac = new google.maps.Marker({ 
position: new google.maps.LatLng(30.819834, -73.950455), 
map: map, 
icon: offIcon 
}); 
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3'; 
function markerClick() { 
var audio2 = document.createElement('audio'); 
audio2.src = 'http://fri.ellieirons.com/wp-  content/uploads/2012/03/machine.mp3' ,'' ; 
audio2.play(); 
} 
google.maps.event.addListener(marker1_edm, 'click', markerClick1); 
google.maps.event.addListener(marker2_nac, 'click', markerClick); 
</script>  
</body> 
</html> 

Antwort

1

Das Audio muss explizit angehalten werden, und dies zu tun, müssen Sie die Variablen global deklariert werden:

<script> 

var audio2 = document.createElement('audio'); 
audio2.src = 'http://fri.ellieirons.com/wp-  content/uploads/2012/03/machine.mp3' ,'' ; 

var audio1 = document.createElement('audio'); 
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3'; 

var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 5, 
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point 
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP 
}); 
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png"); 
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png"); 
var marker1_edm = new google.maps.Marker({ 
position: new google.maps.LatLng(40.821523, -73.949661), 
map: map, 
icon: offIcon 
}); 

marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3'; 
function markerClick1() { 
audio2.pause(); 
audio1.play(); 
} 
var marker2_nac = new google.maps.Marker({ 
position: new google.maps.LatLng(30.819834, -73.950455), 
map: map, 
icon: offIcon 
}); 
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3'; 
function markerClick() { 
audio1.pause(); 
audio2.play(); 
} 
google.maps.event.addListener(marker1_edm, 'click', markerClick1); 
google.maps.event.addListener(marker2_nac, 'click', markerClick); 
</script>  
</body> 
</html>