2015-05-14 124 views
2

我覺得這將是一個簡單的任務做一個谷歌/ StackOverflow搜索,但我似乎無法找到任何關於該主題......無論如何,我想要做的就是創建我的自己的地理編碼器搜索欄,在我的地圖盒地圖外運行。自定義地圖框Geocoder控件

例如,採取Zillow主頁。當你訪問主頁時,你還沒有在地圖上。您可以在提供的搜索欄中輸入郵政編碼,按Enter(或按鈕),然後出現地圖,以您提供的郵政編碼爲中心。

我基本上想要做同樣的事情。在我的主頁上,我想要有一個簡單的郵政編碼輸入和一個點擊按鈕,觸發地圖出現並以所提供的郵政編碼爲中心。

有人可以提供一些見解如何實現這一點?非常感謝!

回答

3

如果您要將Mapbox地理編碼結果顯示爲與其地圖之一不一致,則會違反Mapbox Terms of Service。這可以解釋爲什麼沒有獨立的庫來這樣做。

但是,您所描述的聽起來並不像它會與ToS相沖突,應該相當簡單,儘管高度依賴於您的主頁是如何實現的。

退房這爲的jsfiddle一個簡單的例子:https://jsfiddle.net/7tf8dfL5/19/

L.mapbox.accessToken = 'pk.yourmapboxaccesstokengoeshere'; 
var geocoder = L.mapbox.geocoder('mapbox.places'), 
    map = null; 

function showMap(err, data) { 
    // The geocoder can return an area, like a city, or a 
    // point, like an address. Here we handle both cases, 
    // by fitting the map bounds to an area or zooming to a point. 
    if (!map) { 
     map = L.mapbox.map('map', 'mapbox.streets'); 
    } 

    if (data.lbounds) { 
     map.fitBounds(data.lbounds); 
    } else if (data.latlng) { 
     map.setView([data.latlng[0], data.latlng[1]], 13); 
    } 
} 


function geocodeThis() { 
    var text = document.getElementById('search').value; 
    if (text.length >= 5) { 
     geocoder.query(text, showMap); 
    } 
} 
<div id='map'></div> 
<input type='text' oninput='geocodeThis()' id='search'> 

這是基於this Mapbox.js example

+0

我改編了我的項目解決方案,效果很棒!非常感謝! –