单击即可打开文本框的传单自定义控件

Question

单击即可打开文本框的传单自定义控件

Cez*_*r B 3 javascript leaflet

我已按照此传单教程了解如何为我的地图创建控制按钮。

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

任何帮助表示赞赏。

Answer 1

Svi*_*ica 5

我相信下面的示例可以将您引向正确的方向。您可以添加简单而有效的插件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);

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	2725 次
最近记录：	2 年，11 月前