Address Search
Mit der Adresssuche können Sie verschiedene Geocodes in der Nähe Ihres Ausgangspunkts anzeigen (Filialen, Dienstleistungen usw.).
Anleitung
Für die Implementierung einer Umkreissuche, die gefundene Ergebnisse gemäß den Wünschen des Benutzers auf der SmartMaps-Karte geocodiert, wird zunächst ein div-Element mit der ID map-wrapper in das Body-Tag des HTML-Scripts eingefügt.
Um die Anzeige der SmartMaps-Karte zu ermöglichen, enthält der map-wrapper ein leeres div-Element mit der ID map. In diesem div-Element wird die Karte zur Laufzeit geladen. Für das div-Element können Sie über das style-Attribut eine feste Höhe und Breite für die Karte festlegen.
Die Implementierung der Umkreissuche und der entsprechenden Auflistung der in der Nähe des Ausgangspunkts befindlichen POIs wird durch die Einbindung von JavaScript-Code ermöglicht. Wie in diesem Beispiel kann dieser Code über ein Script-Tag in das HTML-Script eingebunden werden oder in einer separaten .js-Datei liegen. Alle Variablen und Funktionen werden in der Methode ym.ready implementiert, da diese Methode Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.
Um die SmartMaps-Karte zur Auswahl des Ausgangspunkts der Umkreissuche anzuzeigen, wird ein Objekt der Klasse ym.map erstellt. Parameter sind die ID des div-Elements, in dem die Karte gezeichnet werden soll, sowie die gewünschten Kartenoptionen (Startposition, Start-Zoomstufe usw.). Um die Karte im Code weiter verwalten zu können, wird das Objekt in einer Variablen map gespeichert.
// Define map.
var map = new ym.map("map", {
center: new ym.latLng(51.20978708852442, 10.45829772949219),
zoom: 14
});
window.map = map;
Die Umkreissuche wird durch ein Objekt der Klasse ym.services.AddressSearch ermöglicht. Dieses Objekt wird in der Variablen address gespeichert. Das folgende Beispiel zeigt die Implementierung einer Umkreissuche nach Filialcodes. Dazu wird die Methode byBranch zur Initialisierung benötigt. Der erste Parameter der Methode byBranch sind die Filialcodes der POIs, die für die Suche berücksichtigt werden sollen. An zweiter Stelle wird der Ausgangspunkt der Suche definiert. Im folgenden Beispiel ist dies stets der Mittelpunkt des Kartenrechtecks, ermittelt über die Methode getCenter der Klasse ym.map. An letzter Stelle steht der Radius, innerhalb dessen die Umkreissuche stattfinden soll.
// Define circumference search.
var address = new ym.services.AddressSearch();
address.byBranch(['CGGA'], map.getCenter(), 50000);
Während einer laufenden Umkreissuche werden die gefundenen POIs als GeoJSON-Objekte verwaltet. Dazu ist ein Objekt der Klasse ym.GeoJson erforderlich. Mit diesem Objekt können eingehende Adressdaten mit einem Marker und, wie im folgenden Beispiel, mit einem Pop-up initialisiert werden. Diese Objekte werden auf einem Layer verwaltet, der auf der SmartMaps-Karte gezeichnet werden könnte. Um auf den Layer zuzugreifen, wird das Objekt in der Variablen geoJson gespeichert.
var geoJson = new ym.geoJson(null, {
onEachFeature: function(feature, layer) {
layer.bindPopup("" + feature.properties.jcard.address.companyName + "");
}
});
Um die Umkreissuche zu verfolgen, wird ein EventEmitter für die Klasse AddressSearch verwendet, der das Geocoding auf der SmartMaps-Karte ermöglicht. Der Listener führt Funktionen bei bestimmten Ereignissen aus und kann verwendet werden, um zwischen erfolgreichen und nicht erfolgreichen Umkreissuchen zu unterscheiden. Im Fall der Klasse AddressSearch mit dem EventEmitter können Sie direkt die Methode on verwenden.
Wenn die Umkreissuche erfolgreich ist ('success'), werden alle Ergebnisse mit der Methode addData der Klasse GeoJson hinzugefügt und dem Layer zugefügt. Im Falle einer nicht erfolgreichen Anfrage wird ein Fehler im Fehlerprotokoll erfasst.
// Successful
address.on('success', function(req, res) {
geoJson.addData(res.body);
});
// Unsuccessful
address.on('error', function(request, response) {
console.log(response.xhr);
console.log(response.event);
});
Die abschließende Darstellung der Ergebnisse einer Umkreissuche auf der Karte wird erreicht, indem der Layer des GeoJson-Objekts geoJson dem Kartenobjekt map hinzugefügt wird.
Die Umkreissuche ist nun erfolgreich integriert.
HTML-Dokument
Codebeispiel: Umkreissuche
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Umkreissuche</title>
</head>
<body>
<script
src="https://www.yellowmap.de/api_rst/api/loader?libraries=enterprise&apiKey=[INSERT API-KEY]"></script>
<div id="map" style="height: 400px; width: 500px;"></div>
<script>
ym.ready(function (modules) {
// Define map.
var map = new ym.map("map", {
center: new ym.latLng(51.20978708852442, 10.45829772949219),
zoom: 14
});
window.map = map;
// Define circumference search.
var address = new ym.services.AddressSearch();
address.byBranch(['CGGA'], map.getCenter(), 50000);
// GeoJson
var geoJson = new ym.geoJson(null, {
onEachFeature: function (feature, layer) {
layer.bindPopup("<p>" + feature.properties.jcard.address.companyName + "</p>");
}
});
// Successful
address.on('success', function (req, res) {
geoJson.addData(res.body);
});
// Unsuccessful
address.on('error', function (request, response) {
console.log(response.xhr);
console.log(response.event);
});
geoJson.addTo(map);
});
</script>
</body>
</html>