2015-05-14 474 views
2

我觉得这将是一个简单的任务做一个谷歌/ StackOverflow搜索,但我似乎无法找到任何关于该主题......无论如何,我想要做的就是创建我的自己的地理编码器搜索栏,在我的地图盒地图外运行。自定义地图框Geocoder控件

例如,采取Zillow主页。当你访问主页时,你还没有在地图上。您可以在提供的搜索栏中输入邮政编码,按Enter(或按钮),然后出现地图,以您提供的邮政编码为中心。

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

有人可以提供一些见解如何实现这一点?非常感谢!

回答

3

如果您要将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

+0

我改编了我的项目解决方案,效果很棒!非常感谢! –