向地图添加标记后播放哔声答案

【问题标题】：Play a beep sound after adding a marker to the map向地图添加标记后播放哔声
【发布时间】：2015-07-31 08:14:27
【问题描述】：

以下代码向地图添加了四个标记。标记的数量可能多于四个。在地图中显示每个标记后如何播放哔声？而且，是否可以根据某个值增加或减少哔声的音量？

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>

var planes = [
    ["Marker1",-40.99497,174.50808],
    ["Marker2",-41.30269,173.63696],
    ["Marker3",-41.49413,173.5421],
    ["Marker4",-41.51285,173.63274]
    ];

    var map = L.map('map').setView([-41.3058, 174.82082], 8);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

            var myIcon = L.icon({
                iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
                iconSize: [25, 25]
            });

function beep() {
    var snd = new   
    snd.play();
}

        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})
                .bindPopup(planes[i][0])
                .addTo(map);
                .beep();
        }
</script>
</body>
</html>

【问题讨论】：

你有一个文件可以发出 beep 声音吗？您可以使用 var snd = new Audio('sourceofyourfile'); snd.play() 并使用 snd.volume = 0.1 设置音量（其中值介于 0 和 1 之间）
我的硬盘中有一个哔声文件 'beep.wav' ('beep.mp3')。尝试了你建议的方式。但不起作用。
是“wav”还是“mp3”？
两者都试过了。不工作。
为什么不用音频源文件的实际路径更新代码块？然后让我们知道您的 javascript 控制台在错误方面做出了什么反应？

标签： html leaflet gis

【解决方案1】：

在同事的建议下，我尝试了这种方式，并且成功了。谢谢大家。

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>

var planes = [
    ["Marker1",-40.99497,174.50808],
    ["Marker2",-41.30269,173.63696],
    ["Marker3",-41.49413,173.5421],
    ["Marker4",-41.51285,173.63274]
    ];

    var map = L.map('map').setView([-41.3058, 174.82082], 8);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
        }).addTo(map);

            var myIcon = L.icon({
                iconUrl: 'http://leafletjs.com/dist/images/marker-icon.png',
                iconSize: [25, 25]
            });
</script>
    <audio id="audio" src="D:\check\beep.mp3" autostart="false" ></audio>
    <script>
    function PlaySound() {
          var sound = document.getElementById("audio");
          sound.play()
      }
    </script>

<script>
        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]], {icon: myIcon})
                .bindPopup(planes[i][0])
                .addTo(map);
                PlaySound();
        }
    </script>
</body>
</html>

【讨论】：