gpt4 book ai didi

javascript - 传单 geojson 不会显示标记

转载 作者:行者123 更新时间:2023-12-01 00:00:53 24 4
gpt4 key购买 nike

我正在尝试在我的应用程序中用带有传单的标记来可视化一个点。为此,我正在构建一个功能,该功能正在测试网站上运行(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(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>

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

我尝试了几种找到的编码方法,但找不到使其工作。请帮忙:)

最佳答案

你的geojson是一个字符串,你必须将它解析为一个对象。

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

更新

要解码 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

关于javascript - 传单 geojson 不会显示标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60744578/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com