点击地图div上的按钮实现对地图数据的入库操作

针对这个问题，我会提供一份完整攻略，解释如何通过点击地图div上的按钮来实现对地图数据的入库操作。

步骤1：创建地图

首先，需要创建一个地图。可以使用开源的JS库，如Leaflet，OpenLayers等。在这里，我们以Leaflet为例。使用以下代码创建一个地图：

<div id="map"></div>

<script src="http://cdn.leafletjs.com/leaflet-1.5.1/leaflet.js"></script>
<script>
  var map = L.map('map');
  var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  map.setView([39.92, 116.38], 12);
</script>

这里，通过添加<div>元素创建地图容器，然后使用L.map()方法创建地图对象。接下来，定义一个layer图层，将其添加到地图对象中，最后设置地图的中心点和缩放级别。

步骤2：添加按钮

接下来，我们需要向地图容器添加一个按钮，它将触发数据存储操作。可以使用普通的HTML元素，如<button>元素或使用库中的控件。

这里，我们使用leaflet-easybutton库来创建一个按钮。该库提供了一个简单易用的API用于创建自定义按钮，该按钮可添加到地图中，并在点击后执行指定的函数。使用示例代码如下：

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-easybutton/2.4.0/easy-button.css"/>
<script src="http://cdn.leafletjs.com/leaflet-1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-easybutton/2.4.0/easy-button.js"></script>
<script>
  var map = L.map('map');
  var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  map.setView([39.92, 116.38], 12);

  var saveButton = L.easyButton('fa-save', function(btn, map){
    // execute data storage operation
  }).addTo(map);
</script>

在这里，使用L.easyButton()方法创建一个保存按钮，并将其添加到地图。

步骤3：执行数据存储操作

最后，我们需要在按钮上执行一个操作，来将地图数据存储到后端服务器中。对于具体的数据存储操作，视需求而定，可以使用AJAX、Fetch等技术来实现。

以下是一个使用AJAX实现的示例代码：

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-easybutton/2.4.0/easy-button.css"/>
<script src="http://cdn.leafletjs.com/leaflet-1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-easybutton/2.4.0/easy-button.js"></script>
<script>
  var map = L.map('map');
  var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  map.setView([39.92, 116.38], 12);

  var saveButton = L.easyButton('fa-save', function(btn, map){
    var geoJSON = map.toGeoJSON();
    var jsonData = JSON.stringify(geoJSON);
    $.ajax({
      url: "/save",    // save data to backend
      type: "POST",
      data: jsonData,
      success: function(){
        alert("Data saved successfully.");
      },
      error: function(){
        alert("Error in saving data.");
      }
    })
  }).addTo(map);
</script>

在这里，我们在按钮的点击事件中，首先将地图数据转换为GeoJSON格式，然后将其转换为JSON字符串，并使用AJAX将其提交到后端服务器进行存储。

总结

以上就是使用点击地图div上的按钮实现对地图数据的入库操作的完整攻略，示例代码中使用了Leaflet库和leaflet-easybutton库。这个过程可以根据需求进行调整和修改，例如使用其他JS库、修改存储方法等。