自定义地图框Geocoder控件

Question

我觉得这将是一个简单的任务做一个谷歌/ StackOverflow搜索，但我似乎无法找到任何关于该主题......无论如何，我想要做的就是创建我的自己的地理编码器搜索栏，在我的地图盒地图外运行。

例如，采取Zillow主页。当你访问主页时，你还没有在地图上。您可以在提供的搜索栏中输入邮政编码，按Enter（或按钮），然后出现地图，以您提供的邮政编码为中心。

我基本上想要做同样的事情。在我的主页上，我想要有一个简单的邮政编码输入和一个点击按钮，触发地图出现并以所提供的邮政编码为中心。

有人可以提供一些见解如何实现这一点？非常感谢！

Answer 1

如果您要将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。