Question

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

<!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>

Answer 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>

将标记添加到地图后播放哔声

1 个答案: