自定义Mapbox地理编码控件

Question

自定义Mapbox地理编码控件

leafletgeocodingmapbox

5

我觉得对于这个问题，应该很容易在Google / StackOverflow上搜索到相关信息，但是我似乎找不到任何相关的内容...... 无论如何，我只想创建一个自己的Geocoder搜索栏，在我的mapbox地图之外使用。

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

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

是否能提供一些关于如何实现这一目标的见解？非常感谢！

- James Barracca

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- friedbunny · Accepted Answer

如果您展示的Mapbox地理编码结果不与其地图结合使用，这将违反Mapbox使用条款。这就解释了为什么没有独立的库来实现此功能。

但是，您描述的内容似乎不一定会触犯使用条款，并且应该很简单，尽管高度取决于您的主页实现方式。

请查看此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示例的。