我可以在附近搜索我的两个地图代码吗？

时间：2019-07-13 11:22:01

标签： javascript css dictionary leaflet

我要搜索附近的地方。我正在使用传单，我正在避免使用Google地图，因为它们需要信用卡。我有两个代码，一个用于搜索位置，一个用于获取当前位置，是否可以对其中一些代码进行操作/添加，使其成为一个代码，我可以先获取自己的位置，然后将其限制在我可以搜索的当前位置附近商店等附近的地方？我想要的是程序首先获取其当前位置，然后我们可以通过搜索框搜索该区域附近的地点，例如您周围的附近商店。 -我避免使用Google地图，因为他们需要我无法使用的信用卡才能更高效地使用地图或按键。

我试图合并这两个代码，结果是，首先它提示一个对话框，以允许地图获取其当前位置，我允许了，但是地图没有指向我的位置，它保持正常，但是在第二个搜索代码中，我还有一个搜索框正在运行，但是当我搜索诸如宠物店之类的商店时，它为我提供了我所在位置以外地方的宠物店，我想要的是它将在我周围的位置显示附近的商店。 

/*Search feature*/

<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>Map</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(-278px, 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: 741px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/164/395.png" style="height: 256px; width: 256px; left: 997px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/163/394.png" style="height: 256px; width: 256px; left: 741px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/164/394.png" style="height: 256px; width: 256px; left: 997px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/163/396.png" style="height: 256px; width: 256px; left: 741px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/164/396.png" style="height: 256px; width: 256px; left: 997px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/162/395.png" style="height: 256px; width: 256px; left: 485px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/165/395.png" style="height: 256px; width: 256px; left: 1253px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/162/394.png" style="height: 256px; width: 256px; left: 485px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/165/394.png" style="height: 256px; width: 256px; left: 1253px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/162/396.png" style="height: 256px; width: 256px; left: 485px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/165/396.png" style="height: 256px; width: 256px; left: 1253px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/161/395.png" style="height: 256px; width: 256px; left: 229px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/166/395.png" style="height: 256px; width: 256px; left: 1509px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/161/394.png" style="height: 256px; width: 256px; left: 229px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/166/394.png" style="height: 256px; width: 256px; left: 1509px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/161/396.png" style="height: 256px; width: 256px; left: 229px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/166/396.png" style="height: 256px; width: 256px; left: 1509px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/160/395.png" style="height: 256px; width: 256px; left: -27px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/167/395.png" style="height: 256px; width: 256px; left: 1765px; top: 52px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/160/394.png" style="height: 256px; width: 256px; left: -27px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://a.tile.openstreetmap.org/10/167/394.png" style="height: 256px; width: 256px; left: 1765px; top: -204px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://b.tile.openstreetmap.org/10/160/396.png" style="height: 256px; width: 256px; left: -27px; top: 308px;"><img class="leaflet-tile leaflet-tile-loaded" src="http://c.tile.openstreetmap.org/10/167/396.png" style="height: 256px; width: 256px; left: 1765px; top: 308px;"></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>



/* Getting current location code*/

<style>
#mapid { 
  height: 500px;
}
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
    <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
     <script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>

<div id="mapid"></div>
<script>
navigator.geolocation.getCurrentPosition(function(location) {
  var latlng = new L.LatLng(location.coords.latitude, location.coords.longitude);

  var mymap = L.map('mapid').setView(latlng, 13)
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiYmJyb29rMTU0IiwiYSI6ImNpcXN3dnJrdDAwMGNmd250bjhvZXpnbWsifQ.Nf9Zkfchos577IanoKMoYQ'
  }).addTo(mymap);

  var marker = L.marker(latlng).addTo(mymap);
});
</script>

0 个答案:

没有答案
相关问题
最新问题