我期待模仿此功能:http://jsbin.com/cirafujinu/edit?html,output上的展开和图标显示文本框,单击
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Geocoding Map</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
<script src="https://mapzen.com/js/mapzen.min.js"></script>
<style>
#map {
height: 100%;
width: 100%;
position: absolute;
}
html,body{margin: 0; padding: 0}
</style>
</head>
<body>
<div id='map'></div>
<script>
// Set the global API key
L.Mapzen.apiKey = "your-mapzen-api-key";
// Add a map to the #map div
// Center on the Pigott building at Seattle University
var map = L.Mapzen.map("map", {
center: [47.61033,-122.31801],
zoom: 16,
});
// Disable autocomplete and set parameters for the search query
var geocoderOptions = {
autocomplete: false,
params: {
sources: 'osm',
'boundary.country': 'USA',
layers: 'address,venue'
}
};
// Add the geocoder to the map, set parameters for geocoder options
var geocoder = L.Mapzen.geocoder(geocoderOptions);
geocoder.addTo(map);
</script>
</body>
</html>
我试图来解构的JavaScript中使用比可能更多的功能做到这一点,但其一个500+线复杂的对象我需要。
我有权访问jQuery和jQuery UI。我应该从什么方式开始?
我知道它有一个焦点事件,如果你关注文本框,它会回到最小化状态。
我打开演示/想法人们已经看到非常相似的功能,所以我可以用它作为参考。
您可以使用CSS转换并在点击时切换类。 – doutriforce