我希望使用一个文本框和一个提交按钮在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>