英文:
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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <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("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 © <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);
答案1
得分: 1
以下是翻译好的部分:
这里为您提供了修复后的 jsFiddle 演示,点击 🔍 图标进行搜索:
这段 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: '© <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:
The javascript code uses the Leaflet Control Geocoder by Mr. Per Liedman:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
'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);
<!-- language: lang-css -->
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#mapId {
flex-grow: 1;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论