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搜索控件？

1 个答案: