Leaflet:如何在db中保存各种标记位置并在以后加载

时间:2016-03-23 18:05:49

标签: javascript leaflet

我正在散发传单,因为将来我可能需要工作。

看几个网址

http://justinmanley.github.io/Leaflet.Illustrate/examples/0.0.2/simple/ http://leaflet.github.io/Leaflet.toolbar/examples/control.html#

如果有人去那个网址那么必须意识到用户可以在地图上放置标记或在地图上放置方形或圆形。所以我的问题如何在数据库中保存那些标记位置,因为当我显示该地图然后我可以将这些标记再次放在地图上从数据库中,如果我能知道它们的位置并保存到数据库中。

如果我需要在db中保存各种标记位置,那么sql server的表结构将如何。

请讨论我的两点或将我转到相关文章,以帮助我实现这一目标。

感谢

1 个答案:

答案 0 :(得分:1)

我会做这样的事情:

var map = L.map('mapcanvas').setView([51.505, -0.09], 13);

map.on('click', function(e){
    // Place marker
    var marker = new L.marker(e.latlng).addTo(map);

    // Ajax query to save the values:
    var data = {
        lat: e.latlng.lat,
        lng: e.latlng.lng
    }

    var request = new XMLHttpRequest();
        request.open('POST', '/my/url', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);
});

尽管使用jQuery可能更好。

然后,您将从数据库中获取已保存的值,并将它们存储在js对象中,如

var positions = [
    {
        lat: 123.45
        lng: 123.45
    },
    {
        lat: 123.45
        lng: 123.45
    }
]

迭代它们并添加标记:

for (var i in positions) {
    new L.marker([positions[i].lat, positions[i].lng]).addTo(map);
}