programmieren:openstreetmap
Openstreetmap
Karte einbinden
mit Suchfunktion nach Ort
Quelle: https://github.com/perliedman/leaflet-control-geocoder
Wichtig hierfür ist folgender Code:
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script> L.Control.geocoder().addTo(map); </script>
Beispiel:
- download
<!DOCTYPE html> <html> <head> <title>Leaflet Control Geocoder</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <style type="text/css"> body { margin: 0; } #map { position: absolute; width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <script type="text/javascript"> var map = L.map('map').setView([0, 0], 2); L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.Control.geocoder().addTo(map); </script> </body> </html>
programmieren (559 views) · Zuletzt geändert: 24/03/2021 12:14 von conny