如何使用我自己的 html/css 自定义 Mapzen 搜索控件？

Question

如何自定义 L.Mapzen.geocoder 以采用我自己的 HTML/CSS 样式的位于中心的搜索框（就像 Mapzen 演示中的搜索框一样）？

<div id="form-wrapper">
    <form class="form-horizontal">
      <div class="col-lg-offset-3 col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control input-sm">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                  </span>
          </input>
        </div>
      </div>
    </form>
</div>

我想让它保持在中心位置，因为地图会根据位置作为背景进行调整。

它的基本用途是让用户检查他们选择的位置是否正确，并且在单击另一个按钮后，他们的输入将被重定向到另一个 python django 视图。

Answer 1

这是 Mapzen 演示的创建方式。

将地理编码器 expanded 选项设置为 true 以便它始终展开（否则，页面中间只会有一个搜索图标浮动）

添加这个CSS

.leaflet-top {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

在CSS

.leaflet-pelias-control

如何使用我自己的 html/css 自定义 Mapzen 搜索控件？

How to customize Mapzen search control using my own html/css?

html

mapzen