在 Leaflet 中的 .setContent（） 中的 video HTML 标记中使用

Question

好吧，所以我真的试图找到一个解决方案，但到目前为止还没有奏效。在这里：在单击各种标记时，我想播放标记属性中定义的命名视频。vidName

我创建了带有标记的变量“点”，其中每个点都包含参数（版本缩短）：

var points = [{

    latlng: [54.351223, 18.643997],

    title: "F-1",

    name: "name1",

    vidName: "file1.mp4"

  }, {

//another points with same structure

为了将其添加到map中，我使用了一个允许.on（'click'）事件的函数，该函数使用.setContent（）在名为“myCustomControl”的定义框中显示数据，如下所示（也缩短）：

points.forEach(function(p) {

  const marker = L.marker(p.latlng, {

      title: p.title,

      riseOnHover: true

    })

    .addTo(map)

    .on('click', function(e) {

      myCustomControl.setContent(p.name + '<br>' + '<video autoplay><source src="p.vidName" type="video/mp4"></video>');

    })

  markers.push(marker);

});

所以我很想用来显示名为. 作为独立工作正常并显示名称，当我在HTML标签内使用时，视频工作正常。'<video autoplay><source src="p.vidName" type="video/mp4"></video>'file#.mp4p.vidNamefile#.mp4file#.mp4

我尝试了各种方法，例如，以及我可以弄清楚或谷歌搜索的所有可能的直接组合。我真的不是一个合适的程序专家，我肯定缺少一些语法或简单的工具。谢谢！javascript:" #{p.name}"

Answer 1

字符串串联与加法运算符一起使用。对于要包含的每个变量，关闭字符串并将值添加到字符串中，然后再次打开字符串以继续。+p.name&nbsp;+&nbsp;'<br>'&nbsp;+&nbsp;'<video&nbsp;autoplay><source&nbsp;src="'&nbsp;+&nbsp;p.vidName&nbsp;+&nbsp;'"&nbsp;type="video/mp4"></video>'在更现代的日子里，你有模板文本字符串，它是用反引号制成的，并允许你用语法注入变量。`${value}`${p.name}<br><video&nbsp;autoplay><source&nbsp;src="${p.vidName}"&nbsp;type="video/mp4"></video>`