web-dev-qa-db-fra.com

Comment ajouter du html à un marqueur agm dans angular 2?

J'ai besoin d'un moyen de personnaliser le marqueur de carte dans Angular 2 avec agm map. Dans une application de suivi de véhicule, je dois afficher l'état actuel du véhicule via agm-marker dans le composant de suivi en temps réel. Je dois afficher le marqueur de trois couleurs différentes (par exemple, vert pour courir en rouge pour arrêter et jaune pour en marche au ralenti) et pour indiquer le sens de la direction du véhicule.

J'ai cherché beaucoup d'endroits, mais je n'ai trouvé que des icônes qui peuvent être ajoutées au marqueur et j'ai ajouté une icône en utilisant iconUrl comme,

<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>

Et ma sortie est comme,

 enter image description here

Comme cela semble plus gênant, aidez-moi à afficher le code HTML, à la place de cette icône sur le marqueur.

Je suis dans le besoin de sortie exactement comme dans l'image ci-dessous (marqueur avec étiquette html indiquant ce numéro de véhicule particulier).

 enter image description here

angulargoogle-mapstypescriptgoogle-maps-api-3google-maps-markers
7
Maniraj from Karur

Je ne sais pas si et angulaire, mais avec les outils standard Html/js, vous pouvez le faire relativement simple.

1.) Obtenez 2 coordonnées du véhicule dans le répertoire de conduite . Ensuite, utilisez la possibilité d'afficher une flèche le long d'un chemin, donc 2.) Configurez un chemin (à partir des coordonnées données) avec une flèche, et cache le chemin pour que seule la flèche soit visible . 3.) Configurez un marqueur avec une étiquette indirecte (avec un décalage) par rapport à la première coord et n’affiche pas le marqueur.

Ci-joint un exemple pour un véhicule. Peut-être que vous pouvez utiliser cela ou des parties de celui-ci ... Bonne chance, 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

Une fois que j'ai essayé de changer le style du marqueur, une fois que les données ont été liées à la carte. Mais cela n'a pas été permis par agm. Quoi qu'il en soit, la solution suivante a réussi pour moi… Je pense que votre service de données pourra peut-être identifier la direction du véhicule. 

Vous devez donc disposer du type de tableau d'objet de données JSON suivant pour générer une liste de marqueurs.

[
    {
        "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"
    }
]

Vous devez avoir plusieurs icônes permettant d'identifier la direction d'un véhicule et son statut.

Ex:

  • Véhicule qui roule vers le nord, nom de l'icône "0-green-icon.svg"
  • Véhicule qui roule vers l'ouest, nom de l'icône "270-green-icon.svg"
  • Véhicule roulant au nord-ouest, nom de l'icône "315-green-icon.svg"
  • Véhicule arrêté et dirigé vers le sud-ouest, nom de l'icône "225-red-icon.svg"

comme cela, vous devez avoir une liste d’icônes pour chaque statut et direction de véhicule . L’URL du marqueur doit être déterminée selon les données que vous obtenez du service. 

2
Janith Widarshana

Ce n’est pas un problème d’AGM, c’est un problème d’API Google Maps, qui ne vous permet pas d’utiliser HTML pour le marqueur, donc uniquement les images. :( Il existe des solutions pour la création de marqueurs HTML personnalisés tels que que , mais malheureusement, les calques personnalisés ne sont pas encore pris en charge par AGM (ticket) . marqueur personnalisé par vous-même, en utilisant des superpositions google personnalisées sans AGM.

1
Вова Савчук

J'ai une solution de contournement que vous pouvez utiliser si vous ne trouvez pas de meilleure solution:

Pourquoi ne créez-vous pas une nouvelle image de marqueur, avec un arrière-plan transparent et une marge inférieure? Et vous pouvez utiliser le même code que vous avez posté dans la question.

Exemple exagéré https://imgur.com/NLyxyTB.png

0
Falci