Question

我已按照this Leaflet tutorial了解如何为地图创建控制按钮。

点击后，我希望它打开一个简单的文本框，其中包含有关地图及其作者的信息，其概念与this map上的信息按钮类似。

感谢任何帮助。

Answer 1

我相信下面的示例可以帮助您朝着正确的方向发展。您可以添加简单但有效的插件L.EasyButton来获得所需的结果。

我为你创建了一个小片段，只是为了让你朝着正确的方向前进，希望它有所帮助：）

var map = L.map('map').setView([46.163613, 15.750947], 14);
 mapLink =
     '<a href="http://openstreetmap.org">OpenStreetMap</a>';
 L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; ' + mapLink + ' Contributors',
         maxZoom: 18,
     }).addTo(map);


L.easyButton('fa-comment-o', function(btn, map) {
    $('#myModal').modal('show');
}, 'Informacije').addTo(map);

#map {
  width: 600px;
  height: 400px;
}

<html>

<head>

  <title>Custom Icons Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <link href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css" rel="stylesheet">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
               
</head>

<body>

  <div id='map'></div>
    <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  

</body>

</html>

单张自定义控件以单击打开文本框

1 个答案: