在地图上哪里可以找到搜索的输入名称?

时间:2019-07-14 11:17:33

标签: input maps

我想查看来自地图搜索按钮的输入文本在哪里,因为我想对其进行操作。例如,我正在寻找宠物商店,之后在哪里可以找到代码中输入的关键字?我想获取输入的关键字并将其用于其他目的,在哪里可以找到它?我想在代码中添加两个输入类型,并且将输入的两个关键字放入地图的输入搜索中。

<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;">&lt;&lt; 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: '&copy; <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>

0 个答案:

没有答案