Листовка Geo json не будет показывать маркер - PullRequest
Новая
       11

Листовка Geo json не будет показывать маркер

0 голосов
/ 18 марта 2020

Я пытаюсь визуализировать место с маркером с листовкой в ​​моем приложении. Для этого я создаю функцию, которая работает на тестовом веб-сайте (https://embed.plnkr.co/plunk/iiGl5i) 

[{"type":"Feature","geometry":{"type":"Point","coordinates":[30.0,34.0]},"properties":{"divesite_id":8,"name":"Cyprus, Larnaca, Zenobia","show_on_map":true}}]

Интеграция с листовкой работает, если я использую L.marker и addTo (карта), но не с geo json.

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>

_form. html .erb 

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

Я пробовал несколько способов, чтобы найти код, но не могу найти, чтобы он работал. Пожалуйста, помогите:)

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Ваш geo json является строкой, вы должны проанализировать его для объекта. 

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

Обновление

Чтобы декодировать html вас можно использовать это: (от thx до @ghybs) 

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}
var hospitals = JSON.parse(htmlDecode(geojson)):
L.geoJson(hospitals ,{onEachFeature: onEachFeature}).addTo(map);

{ ссылка }

0 голосов
/ 19 марта 2020

Итак, это работает :) 

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

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

       layer.bindPopup(popupContent);
     };

   function htmlDecode(input) {
     var doc = new DOMParser().parseFromString(input, "text/html");
     return doc.documentElement.textContent;
   };

   var sites = JSON.parse(htmlDecode('<%= @geojson %>'));
   L.geoJson(sites ,{onEachFeature: onEachFeature}).addTo(map);

Я только что исправил несколько опечаток - спасибо за помощь @Falke Design и @ ghybs

...