1. Home
  2. Dokumente
  3. Karten
  4. Beispiele
  5. Autovervollständigung
  6. Autovervollständigung (JSONP)

Autovervollständigung (JSONP)

SmartMaps stellt ein Autovervollständigung für Adressen zur Verfügung. Während Sie im Beispiel unten eine Adresse einzutippen beginnen, erscheinen Vorschläge von Adressen, die durch Auswahl in das Formularfeld übernommen werden können.

Die Autovervollständigungsschnittstelle kann sowohl per JSONP als auch per Protobuf angesprochen werden.

Dieses Beispiel ist vollständig; Sie können es lokal speichern und in einem http-Kontext ausführen. Sie müssen lediglich den Wert für den apiKey ersetzen.

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Autovervollständigung (JSONP)</title>
  <!-- SmartMaps CSS einbinden. -->
  <link href="https://www.yellowmap.de/Presentation/Yellowmaps/Examples/assets/site.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.yellowmap.de/api_js/cdn/highlight/styles/github.css">
  <link href="https://www.yellowmap.de/Presentation/YellowMaps/examples/assets/autocomplete.css" rel="stylesheet">
</head>

<body>
  <div id="map-wrapper">
    <form class="float">
      <input id="Autocomplete" class="ym-search" type="search" placeholder="Suche">
    </form>
    <div id="map"></div>
  </div>

  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {

      // Karte definieren.
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });

      var geocoder = new ym.services.GeoCoder();
      geocoder.on('success', function(req, res) {
        if (res.body && res.body.features && res.body.features.length) {
          map.fitBounds(ym.geoJson(res.body.features[0]).getBounds());
        }
      });

      var autoComplete = modules.autoComplete("#Autocomplete", {
        dataType: "jsonp",
        locales: ['DE'],
        // Funktion wird aufgerufen, sobald ein Eintrag aus der Liste ausgewählt wurde.
        onSelected: function(geoJson) {
          geocoder.geocode(geoJson.properties.location);
        }
      });
    });
  </script>
</body>
</html>

 

Wie können wir helfen?