Map

TsgcHTMLComponent_Map — erzeugen Sie eine interaktive Leaflet.js-Karte mit OpenStreetMap- oder CartoDB-Kacheln und Ihren eigenen Markern, Popups und Tooltips, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Map

Eine Kartenkomponente, die einen Leaflet.js-Kartencontainer samt des Skripts ausgibt, das ihn initialisiert. Setzen Sie Zentrum, Zoom und Kachelanbieter, fügen Sie Marker hinzu und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Map

Rendert

Leaflet.js-Karte + Kachelebene

Familie

Diagramme & Visualisierung

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Zentrieren, Marker setzen, rendern

Setzen Sie CenterLatitude, CenterLongitude und Zoom, wählen Sie den TileProvider, rufen Sie AddMarker für jeden Punkt auf und lesen Sie dann HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Map;

var
  oMap: TsgcHTMLComponent_Map;
begin
  oMap := TsgcHTMLComponent_Map.Create(nil);
  try
    oMap.CenterLatitude := 40.4168;
    oMap.CenterLongitude := -3.7038;
    oMap.Zoom := 12;
    oMap.Height := '420px';
    oMap.TileProvider := mtCartoDB;

    oMap.AddMarker(40.4168, -3.7038, 'Madrid', 'Head office');
    oMap.AddMarker(41.3851, 2.1734, 'Barcelona');

    WebModule.Response := oMap.HTML;   // Leaflet map + markers
  finally
    oMap.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Map.hpp

TsgcHTMLComponent_Map *oMap = new TsgcHTMLComponent_Map(NULL);
try
{
  oMap->CenterLatitude = 40.4168;
  oMap->CenterLongitude = -3.7038;
  oMap->Zoom = 12;
  oMap->Height = "420px";
  oMap->TileProvider = mtCartoDB;

  oMap->AddMarker(40.4168, -3.7038, "Madrid", "Head office");
  oMap->AddMarker(41.3851, 2.1734, "Barcelona");

  String html = oMap->HTML;   // Leaflet map + markers
}
__finally
{
  delete oMap;
}

using esegece.sgcWebSockets;

var map = new TsgcHTMLComponent_Map();
map.CenterLatitude = 40.4168;
map.CenterLongitude = -3.7038;
map.Zoom = 12;
map.Height = "420px";
map.TileProvider = TsgcHTMLMapTileProvider.mtCartoDB;

map.AddMarker(40.4168, -3.7038, "Madrid", "Head office");
map.AddMarker(41.3851, 2.1734, "Barcelona");

string html = map.HTML;   // Leaflet map + markers

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Zentrum & Zoom

CenterLatitude und CenterLongitude (Double) setzen die Anfangsansicht; Zoom (Standard 13) setzt die Zoomstufe.

Kacheln

TileProvider (TsgcHTMLMapTileProvider) wählt mtOpenStreetMap, mtCartoDB (hell) oder mtCartoDBDark.

Marker

Markers (TsgcHTMLMapMarkers) enthält die Pins; jeder TsgcHTMLMapMarker hat Latitude, Longitude, PopupText, TooltipText und Color.

Marker hinzufügen

AddMarker(aLat, aLng, aPopup, aTooltip) setzt einen Pin; das Popup öffnet sich bei Klick und der Tooltip erscheint beim Überfahren.

Dimensionierung

Height (eine CSS-Länge wie '420px') steuert die Kartenhöhe; MapID setzt die Element-id des Containers.

Ausgabe

HTML gibt den Leaflet-Stylesheet-Link, das Karten-<div> und das Init-Skript zurück — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Map