简体   繁体   English

传单:如何在db中保存各种标记位置并稍后加载

[英]Leaflet: How to save various marker position in db and load later

i am just forking with leaflet because in future i may have to work. 我只是散发传单,因为将来我可能需要工作。

see few url 看到几个网址

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

if anyone go to that url then must realize user can place marker on map or place square or circle on map. 如果有人转到该网址,则必须意识到用户可以在地图上放置标记或在地图上放置正方形或圆形。 so my question how to save those marker position in db as a result when i will show that map then i can place those marker again on map from db if i could know their position and saving into db. 所以我的问题是,当我将要显示的地图时,如何将这些标记的位置保存在db中,如果我可以知道它们的位置并保存到db中,那么我可以再次将这些标记从db放置在地图上。

if i need to save various marker position in db then how the table structure would look like for sql server. 如果我需要在db中保存各种标记位置,则表结构对于sql server会是什么样子。

please discuss my two points or redirect me to relevant article which help me to achieve this. 请讨论我的两点,或将我重定向到相关的文章,以帮助我实现这一目标。

thanks 谢谢

I would do something like this: 我会做这样的事情:

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);
});

Although it is probably better to use jQuery. 尽管使用jQuery可能更好。

You would then obtain your saved values from the database, store them in a js object, like 然后,您将从数据库中获取保存的值,并将其存储在js对象中,例如

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

Iterate over them and add markers: 遍历它们并添加标记:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM