webentwicklung-frage-antwort-db.com.de

Wie füge ich einem agm-Marker in angle 2 HTML hinzu?

Ich brauche eine Möglichkeit, die Kartenmarkierung in Angular 2 mit einer agm-Map anzupassen. In einer Fahrzeugverfolgungsanwendung muss ich den Fahrzeugstatus derzeit über den agm-Marker in der Live-Verfolgungskomponente anzeigen. Ich muss den Marker in drei verschiedenen Farben anzeigen (Grün für rotes Fahren für gestoppt und gelb für Leerlauf). Außerdem muss ich die Richtung angeben, in die das Fahrzeug derzeit fährt.

Ich habe an vielen Orten gesucht, aber nur Symbole gefunden, die der Markierung hinzugefügt werden können, und das Symbol wurde mit iconUrl wie hinzugefügt.

<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

 enter image description here

Da dies unangenehmer aussieht, helfen Sie mir bitte, anstelle des Symbols auf der Markierung HTML anzuzeigen.

Ich brauche die Ausgabe genau wie im Bild unten (Marker zusammen mit HTML-Label, das diese bestimmte Fahrzeugnummer zeigt).

 enter image description here

7

Ich kenne agm und eckig nicht, aber mit den Standardwerkzeugen Html/js ist das relativ einfach.

1.) Holen Sie sich 2 Koordinaten vom Fahrzeug im Fahrerverzeichnis ..__ Verwenden Sie dann die Möglichkeit, einen Pfeil entlang eines Pfads anzuzeigen, so 2.) Richten Sie einen Pfad (von den angegebenen Koordinaten) mit einem Pfeil und ein verstecken Sie den Pfad so, dass nur der Pfeil sichtbar ist .__) 3) Setzen Sie einen Marker mit der Beschriftung indirekt (mit Versatz) zur ersten Koordinate und zeigen Sie den Marker nicht an.

Anbei ein Beispiel für ein Fahrzeug. Vielleicht können Sie das oder Teile davon verwenden. 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'
        });

		///// Simple example for one vehicle //////
		//define the arrow you will display
		var arrowGreen = {
			path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
			fillColor: 'green',
			fillOpacity: 0.8,
		};
		//set two points in driving direction of vehicle
		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)
		var poly = new google.maps.Polyline({
          path: dirCoordinates,
          strokeColor: 'green',
          strokeOpacity: 0,
          strokeWeight: 6,
		  map: map
		});
        poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]});
		//set the text as marker label without displayinge the marker
		var m = new google.maps.Marker({
		  position: new google.maps.LatLng(dirCoordinates[0]),
		  label: {
			color: 'black',
			fontWeight: 'bold',
			text: 'TN28 AF 1416',
		  	},
		   icon: {
			url: 'none_marker.png',
			anchor: new google.maps.Point(10, -25),
		  },
			map: map
		});

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

2
ReFran

Sobald ich versucht habe, den Markierungsstil zu ändern, binden Sie die Daten an die Karte. Aber durch Agm nicht erlaubt. Wie auch immer, die folgende Lösung war für mich erfolgreich ... Ich glaube, dass Ihr Datendienst möglicherweise die Richtung des Fahrzeugs erkennen kann. 

Sie benötigen also die folgende Art eines JSON-Datenobjektarrays, um eine Markierungsliste zu generieren.

[
    {
        "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 dessen Status identifizieren können.

Ex:

  • Fahrzeug fährt nach Norden Symbolname "0-green-icon.svg"
  • Fahrzeug fährt in Richtung Westen Symbolname "270-green-icon.svg"
  • Fahrzeug fährt nach Nordwesten - Ikonenname "315-green-icon.svg"
  • Fahrzeug angehalten und auf den Südwesten-Ikonnamen "225-red-icon.svg" verwiesen

auf diese Weise müssen Sie eine Liste mit Symbolen für jeden Fahrzeugstatus und jede Fahrzeugrichtung haben. Die Marker-URL muss anhand der Daten, die Sie vom Server erhalten, getötet werden. 

2

Dies ist kein Problem der Hauptversammlung, es ist ein Problem der Google Maps API, die es Ihnen nicht erlaubt, HTML für Markierungen zu verwenden, also nur Bilder. :( Es gibt einige Problemumgehungen für das Erstellen von benutzerdefinierten HTML-Markern wie that . Leider werden von AGM jedoch noch keine benutzerdefinierten Layer unterstützt (ticket) . Wenn Sie dies wirklich benötigen, müssen Sie dies implementieren Benutzerdefinierte Markierung selbst, mit benutzerdefinierten Google-Overlays ohne AGM.

Ich habe eine Problemumgehung, die Sie verwenden können, wenn Sie keine bessere Lösung finden:

Warum erstellen Sie kein neues Markierungsbild mit transparentem Hintergrund und unterem Rand? Und Sie können den gleichen Code verwenden, den Sie in der Frage gepostet haben.

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

0
Falci