如何将自定义用户界面添加到leaflet地图？

Question

我正在使用Leaflet创建一个地图游戏（非常基础）。

基本上，我想在地图上添加一个输入框<div>，这样当用户输入位置时，它会自动显示在地图上的相应坐标。

我已经尝试创建元素，并将其附加到地图<div>中，其中包括以下内容：

var d1 = document.getElementsByClassName('leaflet-control-container')[0]; 

d1.insertAdjacentHTML('afterbegin', '<div id="two">two</div>');

但是 <div> 被显示在地图后面，而图片覆盖了它。我该如何让它像缩放控件一样显示？

- maxflow

---

你可以从leaflet-search插件中获得灵感，它甚至可能适合你的需求。 - ghybs

@ghybs 谢谢。我看到了博客文章，它符合我的答案。请随意写一个答案，这样我就可以接受了。 - maxflow

Answer 1

如果我理解正确，您想创建自己的“控件”（在视觉上与Leaflet默认缩放控件类似，但具有不同的功能），允许查找不同的位置并导航到它们。

至于样式类似于Leaflet默认控件（缩放、图层控件）的控件，您需要：

1. 扩展L.Control。
2. 指定一个onAdd方法，返回要在地图上用作控件的DOM元素。步骤1和2将使您的控件作为标准控件添加到地图角落，具有适当的z-index和边距。
3. 使用自己的类进行样式设计。要获得类似于缩放和图层控件的视觉效果，可以在leaflet-bar类的基础上构建：

.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 5px;
}

示例：（源自“扩展Leaflet：处理程序和控件”教程）

var map = L.map('map').setView([48.86, 2.35], 11);

L.Control.MyControl = L.Control.extend({
  onAdd: function(map) {
    var el = L.DomUtil.create('div', 'leaflet-bar my-control');

    el.innerHTML = 'My Control';

    return el;
  },

  onRemove: function(map) {
    // Nothing to do here
  }
});

L.control.myControl = function(opts) {
  return new L.Control.MyControl(opts);
}

L.control.myControl({
  position: 'topright'
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

.my-control {
  background: #fff;
  padding: 5px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet-src.js" integrity="sha512-2h9aokfcaYW7k0VPn1JqbQDQCaNQRrZJwetlnQ88yJrtIzGLVW/2StdQKoE+TIVNNTUxf6SVa+2vW2KB2EXnnA==" crossorigin=""></script>

<div id="map" style="height: 200px"></div>

话虽如此，您想实现的控制功能与Leaflet Control Search插件（又称“leaflet-search”）非常相似。

一个Leaflet控件，通过自定义属性搜索标记/要素位置。

- ghybs