Wie HTML zu einem Agm-Marker in Winkel 2 hinzufügen?

Ich brauche eine Möglichkeit, die Kartenmarkierung in Angular 2 mit Agm-Karte anzupassen. In einer Fahrzeug-Tracking-Anwendung muss ich den Fahrzeugstatus zur Zeit mittels agm-marker in der Live-Tracking-Komponente anzeigen. Ich muss den Marker in drei verschiedenen Farben anzeigen (z. B. Grün für Rot und Gelb für Leerlauf), und ich muss auch den Weg zeigen, den das Fahrzeug gerade fährt.Wie HTML zu einem Agm-Marker in Winkel 2 hinzufügen?

Ich suchte viele Orte, fand aber nur die Symbole, die an den Marker hinzugefügt werden können, und ich fügte Symbol mit iconUrl wie

<agm-map> 
    <agm-marker class="mapMarker" *ngFor="let device of devices;" [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name"> 
    </agm-marker> 
</agm-map>

Und meine Ausgabe ist wie,

Da dies unbeholfener aussieht, bitte hilf mir HTML anstelle des Symbols auf dem Marker anzuzeigen.

Ich bin in der Notwendigkeit der Ausgabe genau wie im Bild unten (Marker zusammen mit HTML-Label, die diese bestimmte Fahrzeugnummer zeigt).

Quelle

2017-10-21 Mani Raj

Werfen Sie einen Blick auf [diese Bibliothek] (https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel) – MrUpsidown

Haben Sie die Bibliothek bereits erwähnt versucht, wenn Sie noch sind Probleme auftreten, senden Sie bitte Beispielcode, der Ihr Problem reproduziert. – henrisycip

Einmal habe ich versucht, Marker Stil zu ändern, nachdem die Daten binden an die Karte. Aber es war nicht erlaubt von Agm. Die folgende Lösung ist für mich gelungen. Wie ich glaube, kann Ihr Datendienst die Richtung des Fahrzeugs identifizieren.

Sie müssen die folgende Art eines JSON-Datenobjektarrays für die Erstellung der Markierungsliste haben.

[ 
    { 
     "latitude": 51.5238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/20-red-icon.svg" 
    }, 
    { 
     "latitude": 51.238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-green-icon.svg" 
    }, 
    , 
    { 
     "latitude": 51.4238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-yellow-icon.svg" 
    } 
]

Sie sollten mehrere Symbole haben, die die Richtung eines Fahrzeugs und seinen Status identifizieren können.

Ex:

Fahrzeuge nach Norden Symbol Namen "0-grün-icon.svg"
Fahrzeug läuft nach Westen Symbolnamen "270-green-icon.svg"
Fahrzeuglauf laufen nach Nordwesten "315-green-icon.svg"
Fahrzeug gestoppt und gerichtet Symbol Namen "225-rot-icon.svg" Symbol Namen

wie dieser Südwesten, müssen Sie eine Liste von Symbolen für jeden Fahrzeugstatus und Richtung haben. Marker Url muss durch die Daten, die Sie vom Service bekommen, getrennt werden.

Quelle

2017-11-03 14:35:14

Ich weiß nicht, agm und eckig, aber mit den Standardwerkzeugen Html/js können Sie es relativ einfach tun.

1.) Holen Sie sich 2 Koordinaten vom Fahrzeug im Fahrverzeichnis. Verwenden Sie dann die Möglichkeit, einen Pfeil entlang eines Pfades anzuzeigen, also 2.) Richten Sie einen Pfad (von den angegebenen Koordinaten) mit einem Pfeil ein und blenden Sie den Pfad so aus, dass nur der Pfeil sichtbar ist. 3.) Richten Sie eine Markierung mit indirekter Beschriftung (mit Offset) auf die erste Koordinate ein und zeigen Sie die Markierung nicht an.

Anbei ein Beispiel für ein Fahrzeug. Vielleicht kannst du das oder Teile davon benutzen. Viel Glück, Reinhard

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Polylines</title> 
 
    <style> 
 
     #map {height: 100%;} 
 
     html, body {height: 100%;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 7, 
 
      center: {lat: 18.1, lng: 79.1}, 
 
      mapTypeId: 'terrain' 
 
     }); 
 

 
\t \t ///// Simple example for one vehicle ////// 
 
\t \t //define the arrow you will display 
 
\t \t var arrowGreen = { 
 
\t \t \t path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
 
\t \t \t fillColor: 'green', 
 
\t \t \t fillOpacity: 0.8, 
 
\t \t }; 
 
\t \t //set two points in driving direction of vehicle 
 
\t \t var dirCoordinates = [ 
 
      {lat: 18.0935, lng: 79.0741}, 
 
      {lat: 18.0936, lng: 79.0742}, 
 
     ]; 
 
     //define a poly with arrow icon (which is displayed in driving directory) 
 
\t \t var poly = new google.maps.Polyline({ 
 
      path: dirCoordinates, 
 
      strokeColor: 'green', 
 
      strokeOpacity: 0, 
 
      strokeWeight: 6, 
 
\t \t map: map 
 
\t \t }); 
 
     poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]}); 
 
\t \t //set the text as marker label without displayinge the marker 
 
\t \t var m = new google.maps.Marker({ 
 
\t \t position: new google.maps.LatLng(dirCoordinates[0]), 
 
\t \t label: { 
 
\t \t \t color: 'black', 
 
\t \t \t fontWeight: 'bold', 
 
\t \t \t text: 'TN28 AF 1416', 
 
\t \t \t }, 
 
\t \t icon: { 
 
\t \t \t url: 'none_marker.png', 
 
\t \t \t anchor: new google.maps.Point(10, -25), 
 
\t \t }, 
 
\t \t \t map: map 
 
\t \t }); 
 

 
\t \t //..... 
 
\t \t // ..more vehicles 
 
\t } 
 
    </script> 
 
\t <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
    </body> 
 
</html>

Quelle

2017-11-04 21:06:53 ReFran

Danke, aber ich bin in der Notwendigkeit der Ausgabe in Form von Typoskript. –

Ich habe eine Abhilfe, die Sie im Fall können Sie nicht finden, eine bessere Lösung:

Warum nicht einen neuen Marker erstellen Bild, mit einem transparenten Hintergrund und einem unteren Rand? Und Sie können den gleichen Code verwenden, den Sie in der Frage gepostet haben.

übertriebenes Beispiel https://imgur.com/NLyxyTB.png

Quelle

2017-11-09 00:01:39 Falci

Dies ist kein Problem der Hauptversammlung, es ist ein Problem von Google Maps API, die nicht Sie HTML für Marker zu verwenden, erlaubt, so dass nur Bilder. :(Es gibt einige Problemumgehungen für die Erstellung von benutzerdefinierten HTML-Markierungen wie that, aber leider benutzerdefinierte Layer werden von AGM noch nicht unterstützt (ticket). So sieht aus, als wenn Sie das wirklich benötigen, müssen Sie benutzerdefinierten Marker selbst implementieren, mit benutzerdefinierten Google-Overlays ohne

Quelle

2017-12-18 07:46:40

Wie HTML zu einem Agm-Marker in Winkel 2 hinzufügen?

Antwort

Verwandte Themen