[英]leaflet geojson wont show marker
I'm trying to visualize a spot with a marker with leaflet in my application.我正在尝试在我的应用程序中使用带有传单的标记来可视化一个点。 For this I'm building a feature, which is working on a test website ( https://embed.plnkr.co/plunk/iiGl5i )为此,我正在构建一个功能,该功能正在测试网站 ( 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}}]
The integration with leaflet works, if I'm using L.marker and addTo(map), but it doesn't with the geojson.与传单的集成工作,如果我使用 L.marker 和 addTo(map),但它不与 geojson。
application.html.erb应用程序.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 _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>
I tried several ways to code I found, but can't find make it work.我尝试了几种方法来编写我找到的代码,但找不到使其工作。 Please help :)请帮忙 :)
Your geojson is a string, you have to parse it to a object.您的 geojson 是一个字符串,您必须将其解析为一个对象。
var hospitals = JSON.parse(geojson):
L.geoJson(hospitals ,{onEachFeature: onEachFeature}).addTo(map);
Update更新
To decode the html you can use this: (thx to @ghybs)要解码 html,您可以使用:(感谢@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);
https://stackoverflow.com/a/34064434/8283938 https://stackoverflow.com/a/34064434/8283938
So, this is working :)所以,这是有效的:)
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);
I just fixed a few typos - thanks for help @Falke Design and @ghybs我刚刚修正了一些错别字 - 感谢@Falke Design 和@ghybs 的帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.