0

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

<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 视图。

4

1 回答 1

0

以下是 Mapzen 演示的创建方式。

  1. 将 geocoderexpanded选项设置为 true 以便它始终展开（否则，页面中间只会出现一个搜索图标）

  2. 添加这个 CSS

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

  3. 在 CSS 中调整.leaflet-pelias-control到您想要的宽度和高度

于 2017-08-23T20:15:26.327 回答