自定义Mapbox Geocoder控件 [英] Custom Mapbox Geocoder Control

问题描述

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

I felt like this would be a simple task to do a Google / StackOverflow search for, but I can't seem to find anything on the topic... Anyways, all I want to do is create my own Geocoder Search bar that works OUTSIDE of my mapbox map.

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

For instance, take the Zillow homepage. When you visit the homepage, you are not yet on the map. You can enter a zip code into the search bar provided, press enter (or the button), and then the map appears, centering on the zip code you provided.

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

I basically am looking to do the same thing. On my homepage, I want to have a simple zip code input and a button to click that triggers the map to appear and center on the zip code provided.

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

Can someone provide some insight on how to achieve this? Thank you so much!

推荐答案

如果要显示Mapbox地理编码器的结果不与其地图之一一起显示，将违反

If you were to show Mapbox geocoder results not in conjunction with one of their maps, it would violate the Mapbox Terms of Service. This would explain why there are no independent libraries for doing so.

但是您所描述的内容听起来似乎不一定会违反ToS，并且应该相当简单，尽管它很大程度上取决于您首页的实现方式.

But what you describe doesn't sound like it would necessarily run afoul of the ToS and should be fairly simple, though highly dependent on how your homepage is implemented.

请查看此JSFiddle的简单示例: https://jsfiddle.net/7tf8dfL5/19/

Check out this JSFiddle for a simple example: 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示例.

这篇关于自定义Mapbox Geocoder控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！