Benutzer-Werkzeuge

Webseiten-Werkzeuge


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: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
     L.Control.geocoder().addTo(map);
  </script>
  
  </body>
</html>

Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren (48 views) · Zuletzt geändert: 24/03/2021 12:14 von conny