使用mapbox api按地址搜索位置

时间:2014-04-02 09:17:00

标签: geocoding mapbox

我希望使用一个文本框和一个提交按钮在mapbox中进行简单的地理编码。我想在文本框中输入地址,然后单击“提交”按钮,结果将显示在this这样的地图上。请帮帮我。

这是我的代码

<html>
<head>
<meta charset=utf-8 />
<title>Geocoder keepOpen</title>

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:20; bottom:20;right:30; width:30%; }
</style>
<style>
  body { margin:0; padding:0; }
  #action { position:absolute; top:20; bottom:20;right:70;left:0; width:30%; }
</style>
</head>
<body>

<div id='map'></div>
<div id='action'>
Address: <input type="text" id="text" name="lname"><br>
<input type="submit" id="submit" value="Submit"  onclick="fun()">
</div>
<script>


var text = document.getElementById('text');
var submit = document.getElementById('submit').onClick;
L.mapbox.map('map', 'examples.map-vyofok3q')
    .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q', {
        keepOpen: true
    })).on('found',foundHandler)
        .on('select',selectHandler);

</script>

</body>
</html>

0 个答案:

没有答案