将音频/图像添加到 Mapbox 弹出窗口

如何解决将音频/图像添加到 Mapbox 弹出窗口

我正在 MapBox 上创建地图，旨在将音频和图像链接到五个位置。我已经创建了地图，加载了位置，添加了一个带有文本的弹出窗口 - 但我正在努力添加音频和图像的最后步骤。

我很乐意帮助您完成此代码。我想这不是那么难，但我已经达到了我的极限！

额外注意：出于某种原因，我创建的一些弹出框稍微偏离了它们所附加的标记......不确定为什么会这样，但也很想知道对此的任何想法！

任何提示或建议将不胜感激！

<!DOCTYPE html>
<html>
  <head>
    <Meta charset='utf-8' />
    <title>Points on a map</title>
    <Meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapBox.com/mapBox-gl-js/v2.1.1/mapBox-gl.js'></script>
    <link href='https://api.tiles.mapBox.com/mapBox-gl-js/v2.1.1/mapBox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
    mapBoxgl.accesstoken = 'pk.eyJ1IjoidGFsay10by1tZSIsImEiOiJja2p6c3N2YmMwYWw5MnNtZnI2NTd3am9jIn0.J8bDel5Hu3ogZ4NP8TrGTA'; // replace this with your access token
    var map = new mapBoxgl.Map({
      container: 'map',style: 'mapBox://styles/talk-to-me/ckjys86m229ls17mv34s5i6kv',// replace this with your style URL
      center: [5.385306,52.08117],zoom: 15.7
    });
map.on('click',function(e) {
  var features = map.queryRenderedFeatures(e.point,{
    layers: ['talk-to-me-de-heygraeff'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapBoxgl.Popup({ offset: [0,-30] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
    .addTo(map);
});    </script>


  </body>
</html>

将音频/图像添加到 Mapbox 弹出窗口

如何解决将音频/图像添加到 Mapbox 弹出窗口

相关推荐