自定义 Mapbox 地理编码器控件

Question

我觉得 Google / Whosebug 搜索这将是一项简单的任务，但我似乎找不到关于该主题的任何内容...无论如何，我想做的就是创建我自己的 Geocoder 搜索栏，它在我的 mapbox 地图之外工作。

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

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

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

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。

自定义 Mapbox 地理编码器控件

Custom Mapbox Geocoder Control

geocoding

leaflet

mapbox