自定义Mapbox地理编码器控件

Question

我觉得这对Google / StackOverflow搜索来说是一个简单的任务，但我似乎无法找到关于这个话题的任何内容......无论如何，我想做的就是创建我自己的Geocoder搜索栏，它可以在OUTSIDE上运行我的地图集地图。

例如，走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。