自定义Mapbox Geocoder控件

Question

我觉得这是执行Google / StackOverflow搜索的一项简单任务，但是我似乎找不到关于该主题的任何内容...无论如何，我要做的就是创建自己的Geocoder搜索栏，该栏可以在其他地方使用我的mapbox地图。

例如，进入Zillow主页。当您访问主页时，您尚未在地图上。您可以在提供的搜索栏中输入邮政编码，然后按Enter（或按钮），然后地图便会以您提供的邮政编码为中心。

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

有人可以提供一些有关如何实现此目标的见解吗？非常感谢！

Answer 1

如果您不将Mapbox Geocoder结果与其地图之一一起显示，则将违反Mapbox服务条款。这可以解释为什么没有独立的库可以这样做。

但是您所描述的内容听起来似乎不一定会违反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'>

这基于此Mapbox.js示例。