如何使用我自己的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视图。

Answer 1

这是如何创建Mapzen演示的。

1. 将地理编码器expanded选项设置为true，以便始终展开它(否则，页面中间只会有一个搜索图标)
2. 添加此CSS .页顶{宽度: 100%；高度: 100%；显示:弯曲；对齐-项目:中心；对齐-内容:中心；}
3. 在CSS中将.leaflet-pelias-control调整到所需的宽度和高度。