我想查看来自地图搜索按钮的输入文本在哪里,因为我想对其进行操作。例如,我正在寻找宠物商店,之后在哪里可以找到代码中输入的关键字?我想获取输入的关键字并将其用于其他目的,在哪里可以找到它?我想在代码中添加两个输入类型,并且将输入的两个关键字放入地图的输入搜索中。
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - leaflet map with place search</title>
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.2/leaflet.css">
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.2/leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css">
<style>
body,
html {
height: 100%;
font-family:Arial;
}
#map {
width: 100%;
height: 100%;
z-index:100;
}
#mapSearchContainer{
position:fixed;
top:20px;
right: 40px;
height:30px;
width:180px;
z-index:110;
font-size:10pt;
color:#5d5d5d;
border:solid 1px #bbb;
background-color:#f8f8f8;
}
.pointer{
position:absolute;
top:86px;
left:60px;
z-index:99999;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div id="map" class="leaflet-container leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/163/395.png" style="height: 256px; width: 256px; left: 463px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/164/395.png" style="height: 256px; width: 256px; left: 719px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/163/394.png" style="height: 256px; width: 256px; left: 463px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/164/394.png" style="height: 256px; width: 256px; left: 719px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/163/396.png" style="height: 256px; width: 256px; left: 463px; top: 284px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/164/396.png" style="height: 256px; width: 256px; left: 719px; top: 284px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/162/395.png" style="height: 256px; width: 256px; left: 207px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/165/395.png" style="height: 256px; width: 256px; left: 975px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/162/394.png" style="height: 256px; width: 256px; left: 207px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/165/394.png" style="height: 256px; width: 256px; left: 975px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/162/396.png" style="height: 256px; width: 256px; left: 207px; top: 284px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/165/396.png" style="height: 256px; width: 256px; left: 975px; top: 284px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/161/395.png" style="height: 256px; width: 256px; left: -49px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/166/395.png" style="height: 256px; width: 256px; left: 1231px; top: 28px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/161/394.png" style="height: 256px; width: 256px; left: -49px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/166/394.png" style="height: 256px; width: 256px; left: 1231px; top: -228px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/161/396.png" style="height: 256px; width: 256px; left: -49px; top: 284px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/166/396.png" style="height: 256px; width: 256px; left: 1231px; top: 284px;"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"></div><div class="leaflet-overlay-pane"></div><div class="leaflet-marker-pane"></div><div class="leaflet-popup-pane"></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out">-</a></div><div class="geocoder-control leaflet-control"><input class="geocoder-control-input leaflet-bar"><ul class="geocoder-control-suggestions leaflet-bar"></ul></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"><div class="leaflet-control-scale leaflet-control"><div class="leaflet-control-scale-line" style="width: 73px;">10 km</div><div class="leaflet-control-scale-line" style="width: 57px;">5 mi</div></div></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Geocoding by Esri</div></div></div></div>
<div class="pointer" style="display: none;"><< Click search button</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script id="rendered-js">
// Initialize the map and assign it to a variable for later use
var map = L.map('map', {
// Set latitude and longitude of the map center (required)
center: [37.7833, -122.4167],
// Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
zoom: 10 });
L.control.scale().addTo(map);
// Create a Tile Layer and add it to the map
//var tiles = new L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png').addTo(map);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).
addTo(map);
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
var results = new L.LayerGroup().addTo(map);
searchControl.on('results', function (data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(0)) break;
results.addLayer(L.marker(data.results[i].latlng));
}window.CP.exitedLoop(0);
});
setTimeout(function () {$('.pointer').fadeOut('slow');}, 3400);
//# sourceURL=pen.js
</script>
</body></html>