Javascript 如何通过复选框输入动态更新模型并立即渲染贴图更改

我希望将一组复选框绑定到我的

站点

模型，当用户选中一个复选框时，相关位置将显示在地图上

我已经用以下格式在我的数据库中植入了一些站点：

/db/migrate/seeds.rb

Site.create(name: "Site name",
    latitude: 40.36618,
    longitude: -105.56095,
    include: false, )

<div class="float-left">
<div class="inner-left">
  <%= hidden_field_tag("sites[]", nil) %>
  <% Site.all.each do |p| %>
    <%= check_box_tag("sites[]", p.name, p.include, { id: dom_id(p) } ) %>
    <%= label_tag dom_id(p), p.name %>
    <br>
  <% end %>
</div>
</div>

<div class="float-right">
<div class="inner-right">
  <div id="usmap" style="width: 800px; height: 500px; position: relative;">
  </div>
</div>
</div>

<div class="clear-floated"></div>

<script>
    var mymap = L.map('usmap', {
        ... 
        ... map parameters here...
        ...
    });

    L.marker([40.366,-105.56]).addTo(mymap)     // This is where I want to add/sub the markers for the 
                                                // map when a checkbox is checked/unchecked.
                                                // Need to loop through or just add/sub the new marker
</script>

我需要生成复选框来更新

：include

字段，然后在添加新地图标记时立即显示它们

/views/sites/map.html.erb

Site.create(name: "Site name",
    latitude: 40.36618,
    longitude: -105.56095,
    include: false, )

<div class="float-left">
<div class="inner-left">
  <%= hidden_field_tag("sites[]", nil) %>
  <% Site.all.each do |p| %>
    <%= check_box_tag("sites[]", p.name, p.include, { id: dom_id(p) } ) %>
    <%= label_tag dom_id(p), p.name %>
    <br>
  <% end %>
</div>
</div>

<div class="float-right">
<div class="inner-right">
  <div id="usmap" style="width: 800px; height: 500px; position: relative;">
  </div>
</div>
</div>

<div class="clear-floated"></div>

<script>
    var mymap = L.map('usmap', {
        ... 
        ... map parameters here...
        ...
    });

    L.marker([40.366,-105.56]).addTo(mymap)     // This is where I want to add/sub the markers for the 
                                                // map when a checkbox is checked/unchecked.
                                                // Need to loop through or just add/sub the new marker
</script>

var mymap=L.map（'usmap'{
... 
…在此映射参数。。。
...
});
L.marker（[40.366，-105.56]）.addTo（mymap）//这是我要为
//选中/取消选中复选框时映射。
//需要循环或仅添加/细分新标记

---

复选框显示，地图显示一个标记（我硬编码的，如上所示），所以一切都很好。只是真的迷失了前进的最佳方式

将

onchange

处理程序附加到Javascript中的复选框。在那里，向服务器发送AJAX请求以更新记录。它还可以立即从页面中删除标记。我只想避免整个

js.erb

和内联脚本标记混乱。您将只是在循环中运行，让服务器参与到客户机的状态中。相反，只需创建一个提供JSON的控制器，该视图包含所需的框架HTML和资产管道中的真实javascript，通过ajax获取JSON数据并使用它填充映射。我有一个有点过时的爱好项目，你可以用它作为例子。