Angular-google-maps: Hinzufügen von Imagemap-Typen

Erstellt am 15. Mai 2016  ·  35Kommentare  ·  Quelle: SebastianM/angular-google-maps

Hallo

Ich möchte benutzerdefinierte Kacheln auf Google Maps wie in diesem Beispiel verwenden: https://developers.google.com/maps/documentation/javascript/examples/maptype-image

Ich habe versucht, eine neue Direktive wie folgt zu erstellen:
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

Ich wollte nur überprüfen, ob dies der richtige Ansatz ist, bei dem alle Optionen und in der Komponente enthalten sind, oder sollte es ausführlicher sein, ein Attribut für jede Eigenschaft zu haben?

Oder da dies nicht wirklich eine visuelle Komponente ist, sollte es nur ein Dienst sein, der in die Komponente übergeben wird. (also nur per Code konfiguriert, keine HTML-Elemente)

Gibt es einen Rat, welcher Ansatz perfektioniert ist?

Danke
Carl

stale feature-request

Hilfreichster Kommentar

Wird diese Funktion in AGM-Maps aktualisiert?

Alle 35 Kommentare

Hallo Karl,

Ich versuche, etwas Ähnliches zu tun, einige benutzerdefinierte WMS-Overlays zu laden, die von einem externen MapServer-Cluster bereitgestellt werden, aber ich stecke fest, weil ich nicht weiß, wie ich einen Verweis auf die tatsächliche googleMap-Instanz abrufen kann, um meine Overlays in die OverlayMapTypes einzufügen Sammlung).

Ich denke, es muss eine Möglichkeit geben, auf die ursprüngliche google.map-Karteninstanz zuzugreifen, indem sie über den GoogleMapsAPIWrapper verfügbar gemacht wird.

Dies ist mein Ansatz (bisher) ... im Konstruktor von MyComponent.ts

`var overlayMap = null;

    // Getting a handle on the GoogleMaps api namespace
    if ((<any>window).google || (<any>window).google.maps) {
        const gm = (<any>window).google.maps;

        if (layers.length > 0) {
            var overlayMapOptions = {
                getTileUrl(coord, zoom) {
                    var url = this.loadBalanceWms() + "/mapserver.exe?Map=../mapfile/xxx.map";
                    url += "&mode=tile";
                    url += "&tile=" + coord.x + "+" + coord.y + "+" + zoom;
                    url += "&tilemode=gmap";
                    url += "&layers=" + layers; //WMS layers
                    url += "&WIDTH=256";
                    url += "&HEIGHT=256";
                    return url;

                },
                tileSize: new gm.Size(256, 256),
                isPng: true,
                name: "WMSOverlay"
            };
            overlayMap = new gm.ImageMapType(overlayMapOptions);

            // Breaks here
            this._mapsWrapper.getMap()
                .then(a => {
                        (<any>a).overlayMapTypes.push(overlayMap);
                    },
                    f => {
                        window.console.log(f);
                    });

        }

    };`

@anaratz Funktioniert das, was du getan hast?? So erstellen Sie eine gekachelte benutzerdefinierte Karte

Nein es geht nicht...
... weil die overlayMapTypes-Sammlung auf der Schnittstelle mapTypes.GoogleMap nicht vorhanden ist und ich auch keine Möglichkeit finde, auf die zugrunde liegende google.maps.Map-Instanz zuzugreifen

@anaratz also gibt es dafür noch keine lösung?

Nein noch nicht

@anaratz Ich habe es funktioniert, aber ich habe zu Beginn dieser Ausgabe nur eine Frage gestellt, wie ich meinen Code strukturieren soll, dann werde ich eine PR machen, sollte ich einfach eine PR machen und sehen, wie es läuft?

@carl09 kannst du uns zeigen, wie du es behoben hast?

@carl09 ja bitte Carl.

Hallo @smgjreinieren , @anaratz ich habe meine PR aktualisiert und eine Demo erstellt

http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

PR: https://github.com/SebastianM/angular2-google-maps/pull/345

jedes feedback wäre toll

@carl09 hast du das auch in maschinenschrift gemacht?

@smgjreinieren Yep, es ist alles in Type Script gemacht

@carl09 Ohhhh jetzt sehe ich sorry! Gut gemacht! Danke

Ich habe Probleme mit der Aufgabe „ clang:check “, ich werde nur versuchen, den Knoten von v4 auf v6 zu aktualisieren und zu sehen, ob es das Problem behebt, es macht Sie wirklich unsicher, wenn Sie Änderungen vornehmen

@carl09 Aber es gibt keinen benutzerdefinierten Kartentyp?

@smgjreinieren Ich habe "Open Street Maps" im Plunker verwendet, um die Änderungen anzuzeigen, funktioniert es bei dir nicht oder ist es nicht das, was du gemeint hast?

Wie dieses Beispiel: https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

Ich habe gerade deine andere Frage gesehen, also verstehe ich jetzt, was du meinst

@carl09 Ich möchte ein eigenes Bild als Kartentyp festlegen, ist "Open Street Maps" ein Bild, das einen benutzerdefinierten Kartentyp erstellt

@smgjreinieren hast du ein geocodiertes Bild? oder ist das nur eine standardbilddatei?

Sie können ein Tool wie http://www.qgis.org/en/site/ verwenden, das Bilder geokodiert und auch Kacheln erstellt, damit Sie sie für Google Maps verwenden können

@carl09 Hmm anscheinend kann ich es nicht benutzen! Kannst du mir vielleicht das Bild umwandeln?

Und warum erkennt Ihr grundlegendes Setup noch die MapTypeId von 'angular2-google-maps/core'? Wahrscheinlich, weil es keinen Kern hat, den ich sehe, aber wie importiere ich es als aus Ihrem Setup: https://github.com/carl09/angular2-google-maps-example

Hallo @smgjreinieren Ich habe meinen Beispielcode in diesem Repo aktualisiert, wenn Sie ihn aktualisieren möchten.
welchen Editor verwendest du zum Bearbeiten? Ich verwende VS Code und es scheint, dass ich die Referenzen kenne, wenn das hilft

@carl09 Danke Kumpel! Aber ich kann die qgis immer noch nicht für Mac zum Laufen bringen! Könnte ich dir vielleicht das Bild schicken, es ist nur ein kleiner Ausschnitt der Weltkarte, ist das auch möglich?

So: http://postimg.org/image/6okpwebsb/

@carl09 ist es möglich, Bilder aus dem lokalen Ordner zu verwenden? statt online

Hallo

Ja, das können Sie, entweder Sie können sie in Ihrer Knoteninstanz hosten, genau wie Sie Ihre CSS- und JS-Dateien hosten, aber ich denke, Sie könnten auch file:// verwenden und lokal darauf verweisen, aber nicht sicher, wie gut das funktionieren würde

Ist es möglich, DefaultUI im Konstruktor zu deaktivieren? Weil es es nicht so erkennt:

constructor(){ this.imageMapOptions = { getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => { return http://www.sylvanreinieren.com/tiles/ ${zoom}/${coord.x}/${coord.y}.png }, tileSize: { height: 256, width: 256 }, maxZoom: 16, minZoom: 12, radius: 1738000, name: 'linZ', disableDefaultUI: true, alt: 'LINZ Topo Maps' }; }

Irgendwelche Fortschritte bei dieser Funktion? Ich habe erst vor ein paar Tagen angefangen, mir angle2-google-maps anzusehen, und es sieht so aus, als würde es das lösen, was ich in meiner Anwendung hinzufügen möchte, aber ich muss die Google Maps-Karten wirklich durch einige detailliertere Karten aus dem Norweger ersetzen " Kartverket".

@carl09 Entschuldigung für die späte Antwort ... so viel zu tun im Moment. Um mit den anderen Elementen konsistent zu sein, sollten wir separate Attribute verwenden, an die Sie binden können, also keine einzelnen [Optionen]. Wäre das für dich in Ordnung?

+1 Bump, würde diese Funktion gerne nutzen

Wurde diese benutzerdefinierte WMS-Layer-Funktion in das neue AGM portiert?

Es gibt also keine Möglichkeit, ein Bild von einer URL abzurufen und auf der Karte anzuzeigen?

@sneckelmann wir haben viel ausprobiert, aber am Ende haben wir jetzt basenkodierte SVGs für die Marker verwendet.. nicht die beste Lösung, aber es funktioniert

Wird diese Funktion in AGM-Maps aktualisiert?

@SebastianM
Genau wie dieser plunkr
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

sind Karten-Overlays in AGM implementiert?

@carl09 als ich openstreetmap durch openweathermap API ersetzte, ersetzte die Kachel die Kartenkachel. Können wir diese Kacheln morphen?

Ich wollte so etwas mit AGM umsetzen

https://jsfiddle.net/601oqwq2/221/

@SebastianM Die Funktion steht schon lange aus. Können wir uns eine Vorstellung davon machen, wie wir auf die interne Google Map-Instanz verweisen, damit wir zumindest eine Problemumgehung vornehmen können, bis die Funktion ein Update von Ihrer Seite erhält?

Ich habe etwas auf #1423 gefunden, lass mich auch etwas denken ;P

@SebastianM
Eine Workaround-Lösung für das obige Szenario

https://github.com/er-shrey/AGM-Openweather-Integration

@carl09 schau mal drüber

Ich denke, die Funktionsanfrage sollte geschlossen werden, da es eine einfache Problemumgehung dafür gibt.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität gab. Es wird geschlossen, wenn keine weiteren Aktivitäten stattfinden. Vielen Dank für Ihre Beiträge.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

DeveloperAdd007 picture DeveloperAdd007  ·  3Kommentare

maneesht picture maneesht  ·  3Kommentare

alexweber picture alexweber  ·  4Kommentare

ChrisDevinePimss picture ChrisDevinePimss  ·  3Kommentare

gizm0bill picture gizm0bill  ·  4Kommentare