Search bar for open street map

huangapple go评论72阅读模式
英文:

Search bar for open street map

问题

I need help to add a functional search bar for this project. Like when you search for 'London' and get redirected to London. I'm having problems.

Here is my code for you guys:

var mymap = L.map("mapid").setView([-23.9608, -46.3331], 13);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,

  attribution:
    'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',

  id: "mapbox.streets",
}).addTo(mymap);

L.marker([-23.9608, -46.3331])
  .addTo(mymap)
  .bindPopup("<b>Santos - SP </b>")
  .openPopup();

mymap.removeControl(mymap.zoomControl);

L.Control.geocoder({
  defaultMarkGeocode: false,
  placeholder: "Search address...",
}).addTo(mymap);

Please note that I've provided the translated code.

英文:

I need help to add an functional search bar for this project. Like you search 'London' and get redirect to London, I'm having problems.

Here is my code for you guys:

var mymap = L.map(&quot;mapid&quot;).setView([-23.9608, -46.3331], 13);

L.tileLayer(&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;, {
  maxZoom: 19,

  attribution:
    &#39;Map data &amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/&quot;&gt;OpenStreetMap&lt;/a&gt; contributors, &#39; +
    &#39;&lt;a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;&gt;CC-BY-SA&lt;/a&gt;, &#39; +
    &#39;Imagery &#169; &lt;a href=&quot;https://www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;&#39;,

  id: &quot;mapbox.streets&quot;,
}).addTo(mymap);

L.marker([-23.9608, -46.3331])
  .addTo(mymap)

  .bindPopup(&quot;&lt;b&gt;Santos - SP &lt;/b&gt;&quot;)
  .openPopup();

mymap.removeControl(mymap.zoomControl);

L.Control.geocoder({
  defaultMarkGeocode: false,

  placeholder: &quot;Search address...&quot;,
}).addTo(mymap);

答案1

得分: 1

以下是翻译好的部分:

这里为您提供了修复后的 jsFiddle 演示,点击 🔍 图标进行搜索:

Search bar for open street map

这段 JavaScript 代码使用了 Mr. Per Liedman 的 Leaflet 控制地理编码器:

'use strict';

var myMap = L.map('mapId', { zoomControl: false })
	.setView([-23.9608, -46.3331], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(myMap);

var marker = L.marker([-23.9608, -46.3331])
  .addTo(myMap)
  .bindPopup('<b>Santos - SP</b>')
  .openPopup();

L.Control.geocoder({
  defaultMarkGeocode: false,
  placeholder: "Search address...",
}).on('markgeocode', function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(myMap);
    myMap.fitBounds(poly.getBounds());
  })
  .addTo(myMap);
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#mapId {
  flex-grow: 1;
}
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-control-geocoder@2/dist/Control.Geocoder.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-control-geocoder@2/dist/Control.Geocoder.min.js"></script>

<div id="mapId"></div>
英文:

Here the fixed jsFiddle demo for you, click on the 🔍 icon to search:

Search bar for open street map

The javascript code uses the Leaflet Control Geocoder by Mr. Per Liedman:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

&#39;use strict&#39;;

var myMap = L.map(&#39;mapId&#39;, { zoomControl: false })
	.setView([-23.9608, -46.3331], 13);

L.tileLayer(&#39;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&#39;, {
  maxZoom: 19,
  attribution: &#39;&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/&quot;&gt;OpenStreetMap&lt;/a&gt; contributors&#39;
}).addTo(myMap);

var marker = L.marker([-23.9608, -46.3331])
  .addTo(myMap)
  .bindPopup(&#39;&lt;b&gt;Santos - SP&lt;/b&gt;&#39;)
  .openPopup();

L.Control.geocoder({
  defaultMarkGeocode: false,
  placeholder: &quot;Search address...&quot;,
}).on(&#39;markgeocode&#39;, function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(myMap);
    myMap.fitBounds(poly.getBounds());
  })
  .addTo(myMap);

<!-- language: lang-css -->

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#mapId {
  flex-grow: 1;
}

<!-- language: lang-html -->

&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css&quot;&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet-control-geocoder@2/dist/Control.Geocoder.min.css&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet-control-geocoder@2/dist/Control.Geocoder.min.js&quot;&gt;&lt;/script&gt;

&lt;div id=&quot;mapId&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月20日 05:16:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76058871.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定