ASP.net Core 在传单地图上动态添加标记[关闭]

Question

如何在网站上使用 ASP.net Core MVC 和 SQL Server 在 Leaflet Map 上动态显示标记？

Answer 1

这是一个完整的演示，如下所示：

型号：

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string LName { get; set; }
}

查看（注：data[i].propertyName，属性名应为camel case）：

@model IEnumerable<Test>
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>

@section Scripts
{
    <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>

    <script type="text/javascript">
        $(document).ready(function () {           
            var map = L.map('map', {
                center: [46.674590, 9.276266],
                minZoom: 4,
                zoom: 6
            });
            $.ajax({
                type: "POST",
                url: '/Tests/Index',
                success: function (data) {
                        var result = JSON.stringify(data);

                        for (var i = 0; i < result.length; ++i) {
                            var popup = '<b>Name:</b> ' + data[i].id +
                                '<br/><b>Latitude:</b> ' + data[i].name +
                                '<br/><b>Longitude:</b> ' + data[i].lName;

                            L.marker([data[i].name, data[i].lName])
                                .bindPopup(popup)
                                .addTo(map);
                        }
                       },
                error: function (xhr) {
                    alert("Error has occurred..");
                }
            });
 
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        });
    </script>
}

控制器：

public class TestsController : Controller
{
    private readonly YourDbContext _context;

    public TestsController(YourDbContext context)
    {
        _context = context;
    }

    // GET: Tests
    public IEnumerable<Test> Index()
    {
        return _context.Test.ToList();
    }
}

数据库：

结果：