Javascript 传单不显示标记

我试图在我的应用程序中用带有传单的标记来可视化一个点。 为此，我正在构建一个功能，该功能正在测试网站（）上运行

如果我使用L.marker和addTo（map），那么与传单的集成是有效的，但与geojson的集成是无效的

application.html.erb

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

   <style>
     #map {height: 400px}
   </style>

<div id=map></div>
<script>
  var lng = '<%= @divesite.longitude %>';
  var lat = '<%= @divesite.latitude %>';
  var popup = '<b><%= @divesite.name %></b><br><%= @divesite.description %>';
  var geojson = '<%= @geojson %>';
  var map = L.map('map').setView([lat, lng], 5);
  L.tileLayer('https://api.maptiler.com/maps/topo/{z}/{x}/{y}.png?key=WuMlitiPNaB5uEkyEiZc').addTo(map);
  // var marker1 = L.marker([lat, lng]).addTo(map);
  // marker1.bindPopup(popup);

  function onEachFeature(feature, layer) {
      var popupContent = "<p> "+feature.properties.name + "</p>";

      if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
      }

      layer.bindPopup(popupContent);
    };

 L.geoJson(geojson,{onEachFeature: onEachFeature}).addTo(map);

</script>

#地图{高度：400px}

\u form.html.erb

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

   <style>
     #map {height: 400px}
   </style>

<div id=map></div>
<script>
  var lng = '<%= @divesite.longitude %>';
  var lat = '<%= @divesite.latitude %>';
  var popup = '<b><%= @divesite.name %></b><br><%= @divesite.description %>';
  var geojson = '<%= @geojson %>';
  var map = L.map('map').setView([lat, lng], 5);
  L.tileLayer('https://api.maptiler.com/maps/topo/{z}/{x}/{y}.png?key=WuMlitiPNaB5uEkyEiZc').addTo(map);
  // var marker1 = L.marker([lat, lng]).addTo(map);
  // marker1.bindPopup(popup);

  function onEachFeature(feature, layer) {
      var popupContent = "<p> "+feature.properties.name + "</p>";

      if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
      }

      layer.bindPopup(popupContent);
    };

 L.geoJson(geojson,{onEachFeature: onEachFeature}).addTo(map);

</script>

var lng=“”；
var lat=''；
var popup='
'；
var geojson=''；
var map=L.map（'map'）.setView（[lat，lng]，5）；
L.tileLayer（'https://api.maptiler.com/maps/topo/{z} /{x}/{y}.png？key=WuMlitiPNaB5uEkyEiZc'）.addTo（map）；
//var marker1=L.标记（[lat，lng]）添加到（map）；
//标记1.bindPopup（弹出窗口）；
功能onEachFeature（功能，图层）{
var popupContent=“”+feature.properties.name+”
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
layer.bindPopup（弹出内容）；
};
geoJson（geoJson，{onEachFeature:onEachFeature}）.addTo（map）；

---

我尝试了几种方法来编写我找到的代码，但找不到有效的方法。请帮助：）

您的geojson是一个字符串，您必须将其解析为一个对象

var hospitals = JSON.parse(geojson):
L.geoJson(hospitals ,{onEachFeature: onEachFeature}).addTo(map);

更新

要解码html，可以使用以下命令：（thx到@ghybs）

---

您的geojson是一个字符串，您必须将其解析为一个对象

var hospitals = JSON.parse(geojson):
L.geoJson(hospitals ,{onEachFeature: onEachFeature}).addTo(map);

更新

要解码html，可以使用以下命令：（thx到@ghybs）

所以，这是有效的：）

功能特性（特性，图层）{
var popupContent=“”+feature.properties.name+”
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
layer.bindPopup（弹出内容）；
};
函数htmlDecode（输入）{
var doc=new DOMParser（）.parseFromString（输入，“text/html”）；
返回doc.documentElement.textContent；
};
var sites=JSON.parse（htmlDecode（“”））；
geoJson（站点，{onEachFeature:onEachFeature}）.addTo（地图）；

我刚刚修正了一些拼写错误-感谢@Falke Design和@ghybs的帮助

所以，这是有效的：）

功能特性（特性，图层）{
var popupContent=“”+feature.properties.name+”
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
layer.bindPopup（弹出内容）；
};
函数htmlDecode（输入）{
var doc=new DOMParser（）.parseFromString（输入，“text/html”）；
返回doc.documentElement.textContent；
};
var sites=JSON.parse（htmlDecode（“”））；
geoJson（站点，{onEachFeature:onEachFeature}）.addTo（地图）；

---

我刚刚修正了几个输入错误-感谢@Falke Design和@ghybs的帮助你确定geojson变量不是空的吗

console.log（geojson）

Yes，I am:）通过一个警报使其可见：geojson[{“类型”：“特征”，“几何体”：{“类型”：“点”，“坐标”：[30.0,34.0]}，“属性”：{“devisite_id”：8，“名称”：“塞浦路斯，拉纳卡，泽诺比亚”，“在地图上显示”：true}}]您确定geojson变量不是空的吗

console.log（geojson）

Yes，I am:）通过一个警报使其可见：geojson[{“类型”：“特征”，“几何体”：{“类型”：“点”，“坐标”：[30.0,34.0]}，“属性”：{“潜水id”：8，“名称”：“塞浦路斯，拉纳卡，泽诺比亚”，“在地图上显示”：true}]