Google Maps über COM (Component Object Model)

[Thom]

Für alle Besitzer der Delphi Starter Edition:
Die fehlende TWebBrowser-Komponente kann hier "nachgerüstet" werden. Zip-Datei downloaden, entpacken und das enthaltene Package installieren. Vorher evtl. noch das Ausgabeverzeichnis für die dcu-Dateien anpassen oder in den Bibliothekspfad aufnehmen.
Das Package wurde von mir selbst erstellt und ist keine Kopie des Originals, das Delphi XE beiliegt.

[DeddyH]

Achso, an den TWebBrowser hatte ich gar nicht gedacht, das erklärt natürlich alles.

[edit] So, ich hatte kurz Zeit für einen ersten Blick und ich kann nur sagen: , Hut ab [/edit]

[Thom]

Vielen Dank, DeddyH!

Ich habe soeben das Framework in der Version 1.1 und die Demos 1-13 zum Download bereitgestellt.

Vielen Dank an alle, die bisher beim Testen und der Weiterentwicklung geholfen haben!

Die Beispiele 11-13 werden im aktuellen Toolbox-Magazin 2/2011 beschrieben.

Hier wird es demnächst mit einer Karte vom Mars und der Einbindung von Karten des Open Street Map Projektes (OSM) weitergehen.

[MapMan]

Hallo Thom,

ich bin heute beim googeln zufällig auf deine Arbeit gestoßen.
Respekt für diese tolle Leistung...und das in 2 Monaten...
Und auch für die Offenlegung der Sources...

Soweit ich das beim ersten betrachten verstehe, ist der grundsätzliche Ansatz das Laden des Google-JS-Frameworks zu Beginn und der anschließende
Zugriff auf die Funktionalität per Wrapper-Objekten.

Ich nutze in einigen meiner Delphi-Geo-Apps das OpenLayers-Framework, allerdings konventionell (Delphi <-> JS Interkommunikation).

Das OL-Framework ist gegenüber Google frei nutzbar da OpenSource, z.B. in Verbindung mit OSM-Karten und ermöglicht die Integration fast aller
Kartenquellen (auch Google).

Dein innovativer Ansatz angewandt beim OL-Framework..das wär's....

Aber klar, man kann nicht auf allen Baustellen aktiv sein...

[MapMan]

Hallo Thom,

das macht richtig Laune, sich durch deine Sources zu lesen. Einfach toll sauber strukturiert...
Ich versuche nachzuvollziehen, wie du über das TWebBrowser-COM-Interface Zugriff auf den JS-Stuff realisierst und hangele mich durch deine Units.

Könntest du vielleicht bei Gelegenheit ein paar Infos zu den Interna deiner Units veröffentlichen ?
(Übertragbarkeit auf anderen JS-Stuff)

Ich hab da immer noch das Thema OpenLayers-Framework im Sinn...

[MapMan]

Hallo Thom,

soweit ich deine Methodik bis jetzt verstehe (ich habe leider keine großen COM-Kentnisse), läuft es grundsätzlich darauf hinaus, über die Klartextbezeichnungen der Javascript-Funktionen an COM-Interfaces zu gelangen, über welche diese dann angesprochen werden können.
Also werden beim Laden von Javascript-Libraries im WebBrowser "temporäre" Interfaces angelegt ?

Ich kenne den Umgang mit COM-Objekten nur über das direkte Erzeugen von Typbibliotheken per Import.
Dann habe ich eine Delphi-Unit zum Ansprechen dieser Objekte.

Aber so "statisch" geht es wohl hier nicht...

Ich hab mir das mal am Beispiel Circle angesehen.
Entscheidend ist hier wohl die Stringkonstante MapsMethod_Circle='Circle'(Google Bezeichnung für die JS-Function) um zum Interface zu gelangen.
Und TScript ist das zentrale Objekt, welches alle Sub-Containerobjekte enthält, also auch alle "Circles"

Hab ich das so in etwa richtig verstanden ?

Hier hab ich mir mal die Aufrufkette ausgehend vom Circle-Button-Klick aus Demo 6 angeschaut.
Noch nicht ganz klar ist mir, wo und wie es letztendlich zum Zeichnen des Circles kommt.

Delphi-Quellcode:

Unit1
-----
procedure TForm1.Button1Click(Sender: TObject);
var
  Bounds: TLatLngBounds;
  CircleOptions: TCircleOptions;
  Lat, Lng: Double;
begin
  if not assigned(Script) or not assigned(Script.Maps[0])
    then Exit;
  with Script do
  begin
    Bounds:=Maps[0].Bounds;                                //angezeigter Kartenbereich ermitteln
    Lat:=Bounds.GetSouthWest.Lat+Random*                   //zufällige Position innerhalb des
        (Bounds.GetNorthEast.Lat-Bounds.GetSouthWest.Lat); //angezeigter Kartenbereichs berechnen
    Lng:=Bounds.GetSouthWest.Lng+Random*                   //-"-
        (Bounds.GetNorthEast.Lng-Bounds.GetSouthWest.Lng);
    CircleOptions:=TCircleOptions.Create;                  //Zirkeloptions-Objekt erstellen
    CircleOptions.Center:=Google.Maps.LatLng(Lat,Lng);     //Zirkelmittelpunkt
    CircleOptions.Clickable:=false;                        //nicht anklickbar
    CircleOptions.FillColor:=clNone;                       //Füllfarbe
    CircleOptions.FillOpacity:=0;                          //Deckkraft der Füllung (0 -> vollkommen transparent)
    CircleOptions.Map:=Maps[0];                            //Kartenobjekt zuweisen
    CircleOptions.Radius:=round((20+Random(80))/100*       //Zirkelradius in Metern
                                1/8*                       //1/8 der Kartendiagonale
                                Distance_km(Bounds.GetNorthEast,Bounds.GetSouthWest)*
                                1000);                     //km -> m
    CircleOptions.StrokeColor:=RGBToColor(Random(255),     //zufällige Linienfarbe
                               Random(255),Random(255));
    CircleOptions.StrokeOpacity:=0.5;                      //Deckraft der Linie
    CircleOptions.StrokeWeight:=5;                         //Linienbreite in Pixeln
    CircleOptions.ZIndex:=0;                               //vertikale Position
    Script.Google.Maps.Circle(CircleOptions);              //Zirkel-Objekt erstellen
  end;
end;

gmAPI
-----
function TMaps.Circle(Opts: TCircleOptions): TCircle;
begin
  if not assigned(Opts)
    then raise Exception.Create(NoOpts);
  Result:=CreateCircleWrapper(Script,BrowserTools.Create(Disp,MapsMethod_Circle,Opts.Disp));
  TScript(Script).Circles.Add(Result);
end;

gmOverlays
----------
function CreateCircleWrapper(Script: TCustomScript; Dispatch: IDispatch): TCircle;
begin
  Result:=TCircle.Create(Script,Dispatch);
end;

TCircle = class(TMVCEventObject)

gmMVC
-----
TMVCEventObject = class(TMVCObject)                      //Zwischenobjekt, gibt es nicht im GoogleMaps API

TMVCObject = class(TJScriptObject)


JScriptObjects
--------------
TJScriptObject = class(TScriptObject)

TScriptObject = class(TDispObject)
private
  FScript: TCustomScript;
protected
  constructor Create(Script: TCustomScript; Dispatch: IDispatch); reintroduce; virtual;
  procedure FreeNotify(Sender: TObject); override;
  function GetPropAsObject(const Name: String; PropClass: TDispObjectClass; var PropObject): TDispObject; override;
  property Script: TCustomScript read FScript;
public
end;

TDispObject
-----------
  TDispObject = class(TNotifyObject)
  private
    FDisp: IDispatch;
    function GetDispEx: IDispatchEx;
  protected
    constructor Create(Dispatch: IDispatch); virtual;
    procedure AddProp(const Name: String; Value: TDispObject); overload;
    procedure SetDisp(Value: IDispatch); virtual;
    procedure SetProp(const Name: String; const Value: OleVariant; CreateIfNotExists: Boolean = false); overload;
    procedure SetProp(const Name: String; DispObject: TDispObject; CreateIfNotExists: Boolean = false); overload;
    procedure SetProp(DispID: Integer; const Value: OleVariant); overload;
    function Exec(const Name: String): OleVariant; overload;
    function Exec(const Name: String; DispObject: TDispObject): OleVariant; overload;
    //function Exec(const Name: String; const Param: OleVariant): OleVariant; overload;
    function Exec(const Name: String; const Params: array of OleVariant): OleVariant; overload;
    function AddProp(const Name: String): Boolean; overload;
    function DelProp(const Name: String): Boolean;
    function GetProp(const Name: String; const Param: String = ''): OleVariant;
    function GetPropAsVariant(const Name: String): OleVariant;
    function GetPropAsDispatch(const Name: String): IDispatch;
    function GetPropAsObject(const Name: String; PropClass: TDispObjectClass; var PropObject): TDispObject; virtual;
    function GetPropAsBoolean(const Name: String; Default: Boolean = false): Boolean;
    function GetPropAsInteger(const Name: String; Default: Integer = 0): Integer;
    function GetPropAsString(const Name: String; const Default: String = ''): String;
    function GetPropAsDouble(const Name: String; Default: Double = 0): Double;
  public
    destructor Destroy; override;
    class function IsObjectFromDisp(Disp: IDispatch): Boolean; virtual;
    function AsVariant: Variant;
    function PropertyExists(Name: String): Boolean;
    property Disp: IDispatch read FDisp write SetDisp;
    property DispEx: IDispatchEx read GetDispEx;
  end;


  INotifyInterface = interface({$IFDEF DELPHI6_UP}IInterface{$ELSE}IUnknown{$ENDIF})
    ['{6971F829-8011-4E6C-B6BD-FAA86048E059}']
    procedure FreeNotification(Sender: INotifyInterface);
    procedure RegisterNotification(AInterface: INotifyInterface);
    procedure UnregisterNotification(AInterface: INotifyInterface);
    function GetObject: TObject;
  end;

  TNotifyObject = class(TObject, INotifyInterface)
  private
    FNotifications: TInterfaceList;
  protected
    procedure FreeNotify(Sender: TObject); virtual;
    procedure DelObjectRef(AInterface: INotifyInterface; var AObject); overload;
    procedure DelObjectRef(Instance: TObject; var AObject); overload;
    function GetObject: TObject;
    //Interface-Methoden:
    function QueryInterface(const IID: TGUID; out Obj): HResult; stdcall;
    function _AddRef: Integer; stdcall;
    function _Release: Integer; stdcall;
    procedure FreeNotification(Sender: INotifyInterface);
    procedure RegisterNotification(AInterface: INotifyInterface);
    procedure UnregisterNotification(AInterface: INotifyInterface);
  public
    procedure BeforeDestruction; override;
  end;

[Thom]

Hallo MapMan,

heute kommen ich endlich einmal dazu, eine Antwort zu verfassen. Weshalb hat ein Tag eigentlich nur 24 Stunden!?

Erst einmal vielen Dank für das Lob!

Ich fange bei der Beantwortung Deinen Fragen einfach mal von hinten an.

Zitat:

...soweit ich deine Methodik bis jetzt verstehe [...], läuft es grundsätzlich darauf hinaus, über die Klartextbezeichnungen der Javascript-Funktionen an COM-Interfaces zu gelangen, über welche diese dann angesprochen werden können.

Ja, genau das ist der Kern des Ganzen.

Zitat:

Also werden beim Laden von Javascript-Libraries im WebBrowser "temporäre" Interfaces angelegt ?

Das machen der Internet-Explorer bzw. die JScript-Engine beim Einlesen der HTML-Seite.
Das "normale" Interface IDispatch wird bei den meisten Browser-Objekten zu einer IDispatchEx-Schnittstelle, die unter anderem das dynamische Hinzufügen und Löschen von Eigenschaften und Methoden beim zugehörigen COM-Objekt ermöglicht. Da diese Methoden und Eigenschaften im Endeffekt auch nur über ihre ID (DispID) angesprochen werden, könnte das Ganze auf den ersten Blick auch über eine Typbibliothek funktionieren.

Zitat:

Ich kenne den Umgang mit COM-Objekten nur über das direkte Erzeugen von Typbibliotheken per Import.
Dann habe ich eine Delphi-Unit zum Ansprechen dieser Objekte.

Das klappt aber leider nur bei statischen Schnittstellen (IDispatch). Durch die Dynamik des IDispatchEx-Interfaces ist die Zuordnung der Property-/Methoden-Bezeichnungen zu den DispID's variabel und unterliegt nur der Einschränkung, daß eine einmal vergebene DispID innerhalb des selben Objektes nicht noch einmal vergeben werden darf. Damit scheidet das Konzept der Typbibliothek bei allen JavaScript-Objekten aus.

Zitat:

Aber so "statisch" geht es wohl hier nicht...

Genau!

Möglich wäre noch das Ansprechen von COM-Objekt-Eigenschaften und -Methoden über (Ole-)Variant-Variablen mit Interface-Zeigern, wie es zum Beispiel im WebBrowser gemacht wird:

Delphi-Quellcode:

WebBrowser1.OleObject.xxx...
//...

Diese unscheinbare Zeile beinhaltet unheimlich viel "Compilermagie" und funktioniert nicht in allen Fällen und nicht mit allen Compilern.

Um trotzdem die Vorzüge der Delphi-IDE mit ihrer Codevervollständigung nutzen zu können, sind Delphi-Objekte notwendig, die die HTML- und JScript-Objekte kapseln. Und genau das ist die grundlegende Idee zu diesem Framework.
Die Unit DispObject enthält das Basis-Objekt TDispObject, vom dem alle anderen Objekte direkt oder indirekt abgeleitet sind. Um einen Mechanismus für die gegenseitige Benachrichtigung zu schaffen, wurde noch INotifyInterface und seine Implementierung TNotifyObject geschaffen, das aber nur Delphi-intern Bedeutung besitzt und keine JavaScript-Entsprechung hat.

Die Kopplung der Funktionalität von TDispObject mit dem COM-Unterbau erfolgt über die Funktionen in der Unit BrowserObjects. Damit stellen diese beiden Units das Herzstück dar und alles andere ist - streng genommen - nur eine "Tech-Demo".

Die Unit JScriptObjects beinhaltet als nächste Stufe die Wrapper für einige grundlegende JavaScript-Objekte, die ihrerseits die Basis sämtlicher Google-Maps-API-Objekte darstellen.
Bei der Gestaltung dieser Objekte habe ich mich so eng wie möglich an das Google-Maps-API gehalten und an einigen Stellen lediglich etwas optimiert und "Komfort-Funktionen" hinzugefügt, die dem Delphi-Programmierer den Umgang mit ihnen etwas erleichtern sollen.

Zitat:

Und TScript ist das zentrale Objekt, welches alle Sub-Containerobjekte enthält, also auch alle "Circles"

Das Script-Objekt - genauer genommen TCustomScript - stellt die Schnittstelle zum Browser-internen JavaScript-Interpreter dar. Würde man mit JavaScript programmieren, wäre das quasi ein impliziter self-Zeiger. Damit man das Script-Objekt nicht bei jedem Aufruf davorsetzen muß, habe ich in den Demos meisten den folgenden Syntax verwendet:

Delphi-Quellcode:

with Script do
begin
  JScriptObject.xxx;
  ...
end;

Das sieht dann etwas mehr nach JavaScript-Syntax aus...

Das Objekt TScript ist ein Nachfolger von TCustomScript und beinhaltet den Zugriff auf den Google-Maps-API-Namespace - hier speziell das (JavaScript-)Objekt Google sowie die Delphi-interne Verwaltung der erstellten Karten, Marker und anderer Objekte.

Zitat:

Noch nicht ganz klar ist mir, wo und wie es letztendlich zum Zeichnen des Circles kommt.

Es gibt das Circle-Objekt. Das ist ein ganz normales JavaScript-Objekt, das um etliche Methoden und Ereignishandler erweitert wurde. Der Konstruktor des Circle-Objektes ist im Google-Maps-API die Funktion goggle.maps.Circle(...) (im JScript-Syntax bis auf den Objekt-Namen klein geschrieben). Als JavaScript würde das so aussehen:

Code:

Circle=new google.maps.Circle(...)

Das Schlüsselwort new konnte ich natürlich nicht in Delphi nachbilden - deshalb wird es hier einfach weggelassen:

Delphi-Quellcode:

Circle:=Google.Maps.Circle(...)
//...

Vielleicht hätte ich eine Funktion New(ObjectConstructor: TMethod) oder so etwas ähnliches schreiben können - aber das wäre dann doch wohl etwas in Richtung Kanonen und Spatzen abgedriftet...

Zur Erstellung eines Circle-Objektes verwendet das Google-Maps-API das Objekt CircleOptions. Auch dafür gibt es einen Delphi-Wrapper: TCircleOptions.
Dieses Objekt kann direkt angelegt und "gefüllt" werden (einfaches JavaScript-Objekt ohne Google-Maps-Konstruktor):

Delphi-Quellcode:

with Script do
begin
  CircleOptions:=TCircleOptions.Create; //Zirkeloptions-Objekt erstellen
  CircleOptions.Center:=...
  ...
end;

Um den Kreis auf der Karte darstellen zu lassen, muß dem Circle-Objekt lediglich das Karten-Objekt zugewiesen werden - alles andere wird JavaScript-intern erledigt:

Delphi-Quellcode:

CircleOptions.Map:=Map_xyz;
//...

Dabei handelt es sich um ein grundlegendes Prinzip aller Wrapper-Objekte: Es werden keine Eigenschaften zwischengespeichert - alle Werte werden direkt aus den zugehörigen JavaScript-Objekten gelesen oder an sie übergeben - sie arbeiten also vollkommen transparent. Nur die Interface-Zeiger und die erstellten Delphi-Objekte werden von den Wrappern verwaltet.

Verwaltungsmäßig wesentlich aufwändiger ist die Umleitung von JavaScript-Ereignissen auf native Delphi-Methoden. Hierbei wird das External-Objekt des Browsers genutzt. Da beim Aufruf unterschiedliche Parameter übergeben und dynamisch Delphi-Methoden aufgerufen werden müssen, hatte ich anfangs RTTI-Mechanismen genutzt, die aber alle älteren Delphi-Versionen ausgesperrt hätten. An einigen Stellen im Quelltext ist das noch an den entsprechenden Compiler-Optionen erkennbar. Das wurde aber grundlegend geändert: Das JScript-Objekt Function macht es möglich. Die Erstellung eines Ereignishandlers erfolgt auf diese Weise:

1. Zuweisung einer Delphi-Methode zu einem Wrapper-Ereignis
2. Erstellung einer JavasScript-Funktion zum Aufruf der Wrapper-internen Methode
3. Registrierung der Wrapper-internen Methode bei der External-Verwaltung

Wird durch ein JavaScript-/HTML-Objekt ein Ereignis ausgelöst, werden folgende Dinge abgehandelt:

1. Abfrage der DispID über das External-Interface
2. Aufruf der External-Methode des Wrapper-Objektes über ihre DispID. Dieser Aufruf erfolgt völlig ohne Parameter - dabei gibt es lediglich eine Unterscheidung, ob es sich um eine Funktion oder Prozedur handet (mit oder ohne Rückgabewert).
3. Ermittlung der Parameter über das JScript-Funktions-Objekt und Umwandlung in Delphi-interne Objekte
4. Aufruf der eigentlichen Delphi-Ereignis-Methode

Zitat:

Ich hab da immer noch das Thema OpenLayers-Framework im Sinn...

Verständlich...

Ich hoffe, daß ich es einigermaßen plausibel ausgedrückt habe: Mit Hilfe der Units JScriptObjects, DispObject und BrowserTools können sämtliche HTML- und JavaScript-Objekte als Delphi-Wrapper nachgebildet werden - und damit wäre auch das OpenLayers-Framework ohne Umweg über den Aufruf von JavaScript ansprechbar - etwas Geduld bei der Umsetzung vorausgesetzt...

Die Funktionen CreatexxxWrapper sind übrigens noch ein Überbleibsel aus "früheren" Tagen: Sie rühren daher, daß die Konstruktoren der JavaScript-Objekte fast immer als protected deklariert sind. Sie sollen also in der Regel nicht direkt aufgerufen werden. Das wiederum verwirrt den Compiler: Liegt der protected-Konstruktor beim Aufruf in einer anderen Unit (auch wenn ein "Access"-Hilfsobjekt erstellt wurde)

Delphi-Quellcode:

type
  TCircleAccess = class(TCircle);
...
TCircleAccess.Create(...)

geht der Schuß zur Laufzeit mitunter nach hinten los.
Das war eine unschöne Zwischenlösung: Da sich die CreatexxxWrapper-Funktionen im Interface-Abschnitt der Units befinden und damit "öffentlich" zugänglich sind, hätte ich auch gleich die Konstruktoren als public definieren können...
Das wurde aber inzwischen behoben und wird in der nächsten Version anders gelöst sein.