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

Question

我該如何定製一個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視圖。

Answer 1

這是如何創建Mapzen演示。

1. 集地理編碼expanded選項設置爲true，使其始終處於展開（否則，將只是一個搜索圖標漂浮在頁面的中間）

2. 添加此CSS

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

3. 在CSS調整.leaflet-pelias-control到你想要的寬度和高度