javascript - 使用传单嵌入地图中的音频

问题描述

我正在尝试在附加了音频文件的地图上创建标记。我遵循了一个样本，但我无法让它工作。非常感谢任何建议。

在这里：https ://codepen.io/julie-thorpe/pen/wvoOeWy

我是 JSON 新手，并不真正了解 Leaflet 库。对不起，如果这充满了非常新奇的错误。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title> Pendlesound </title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
  <link href="mapbox://styles/georgiatestingground/ckl81w70e3e4v18muv7fjkm50" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
  <script src="https://cdn.jsdelivr.net/lodash/4.16.2/lodash.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>

  <style>
    body {
      font: .92em sans-serif;
      color: #333;
      background: #fefefe;
      max-width: 80em;
      margin: 0 auto;
    }

    h1,
    h2 {
      font-weight: normal;
      margin: 0.6em 0;
    }

    .leaflet-popup-content {
      margin: 9px;
    }

    .leaflet-popup-content-wrapper {
      border-radius: 6px;
    }

    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    map.on('click', function(e) {
        var features=map.queryRenderedFeatures(e.point, {
            layers: ["mapbox://styles/georgiatestingground/ckm25y6dwav5m17qk2f8w4qpt"] // replace this with the name of the layer
          }

        );

        if ( !features.length) {
          return;
        }

        var feature=features[0];

        var popup=new mapboxgl.Popup( {
            offset: [0, -15]
          }

        )
  </style>
</head>

<body>

    <p>
      The example audio files are (mostly) OGG, so you'll <a href="http://caniuse.com/#feat=ogg-vorbis">need Firefox, Chrome or Opera</a>.
      (Uses Mapbox.)
    </p>

  <p id="mapid"></p>

  <script type="application/geo+json" id="geo-data">

    {"type": "Feature",
        "properties": {
        "title": "London Underground - Mind The Gap",
        "description": "'Not a sound you'd expect to hear on Pendle Hill",
        "audio_url": "https://freesound.org/data/previews/327/327942_4486188-lq.mp3",
        },
        "geometry": {
        "type": "Point",
        "coordinates": [ -2.308744, 53.8621515 ]
        }
        }
    </script>

  <script type="text/html" id="popup-template">
    <div class="audio-popup">
      <h2><%= title %></h2>
      <span><%= description %></span> <a href="<%= credit_url %>">credit</a>
      <audio src="<%= audio_url %>" controls></audio>
    </div>
  </script>

  <script src="https://cdn.jsdelivr.net/lodash/4.16.2/lodash.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>

  <script>
    (function(W) {
      "use strict";
      var JSON = W.JSON // Derive "globals".
        ,
        L = W.L // Leaflet
        ,
        _ = W._ // Lodash
      ;
      var zoom = 12.5 //Was: 13,
        ,
        mymap = L.map("mapid").setView([-2.308744, 53.862151], zoom),
        popup_template = _.template(elementText(""#popup-template")),
        geo_data = JSON.parse(elementText(""#geo-data"));
      L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}", {
        //L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 15, //Was: 18,
        minZoom: 9,
        // Not needed! //id: 'your.mapbox.project.id',
        accessToken: "pk.eyJ1IjoiZ2VvcmdpYXRlc3Rpbmdncm91bmQiLCJhIjoiY2tsODF0aGx4MGJzOTJwcHN0MWJmZzNtaiJ9.K_FcAZrb1tWzB_6xexelbg"
      }).addTo(mymap);
      W.console.info(geo_data);
      L.geoJson(geo_data, {
        onEachFeature: function(feature, layer) {
          if (feature.properties && feature.properties.audio_url) {
            layer.bindPopup(popup_template(feature.properties));
          } else if (feature.properties && feature.properties.popupContent) {
            layer.bindPopup(feature.properties.popupContent);
          }
        }
      }).addTo(mymap);

      function elementText(selector) {
        return W.document.querySelector(selector).innerText;
      }
    }(window));
  </script>
</body>

</html>

标签： javascriptjsonleafletmapbox

javascript - 使用传单嵌入地图中的音频 - 无法让它们工作

问题描述

解决方案

推荐阅读