leaflet - 自定义 Mapbox 地理编码器控件

Question

我觉得这对于 Google/StackOverflow 搜索来说是一个简单的任务，但我似乎找不到有关该主题的任何内容...无论如何，我想做的就是创建自己的地理编码器搜索栏它在我的 Mapbox map 之外工作。

以 Zillow 主页为例。当您访问主页时，您尚未出现在 map 上。您可以在提供的搜索栏中输入邮政编码，按 Enter(或按钮)，然后就会出现以您提供的邮政编码为中心的 map 。

我基本上想做同样的事情。在我的主页上，我希望有一个简单的邮政编码输入和一个单击按钮，该按钮会触发 map 显示并以提供的邮政编码为中心。

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

Answer 1

如果您要显示 Mapbox 地理编码器结果而不与其 map 之一结合使用，则会违反 Mapbox Terms of Service 。这可以解释为什么没有独立的库可以这样做。

但是您所描述的听起来并不一定会违反服务条款，并且应该相当简单，尽管很大程度上取决于您的主页的实现方式。

查看这个 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 .