Angular-google-maps: étiquettes de marqueur

Créé le 11 mai 2016  ·  27Commentaires  ·  Source: SebastianM/angular-google-maps

Un moyen d'ajouter des étiquettes à des marqueurs comme celui-ci?

image

stale discussion / question feature-request

Commentaire le plus utile

Voici une solution de contournement, à partir de la documentation de l'API google maps, l'étiquette peut être une chaîne ou une spécification d'objet MarkerLabel, donc au lieu d'utiliser une chaîne pour l'étiquette, spécifiez l'objet MarkerLabel et insérez-le en tant que variable, par exemple
`laissez markerLabelObject = {
La couleur rouge",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
texte: nom.élément

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

Tous les 27 commentaires

@ssypi Je pense que ce n'est pas possible pour le moment avec l'ensemble de fonctionnalités donné. Pouvez-vous fournir des extraits de code de cela? Ensuite, nous pouvons réfléchir à la façon dont cela peut être résolu

Je fais également des recherches sur cela, en plus de changer l'icône de la broche !!!

@SebastianM Je n'ai pas encore eu assez de temps pour approfondir ce problème, mais une possibilité serait d'utiliser le markerwithlabel de google-maps-utility-library (sources et docs / exemples) ou ce fork . En un coup d'œil, il semble assez simple à utiliser, même s'il nécessite une référence à la carte.

@ brian-singer l'icône de la broche peut être modifiée en définissant la propriété iconUrl dans la directive marker https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMapMarker-directive.html

Oui, iconUrl a fait l'affaire. @alexweber merci

InfoWindow ne peut pas être stylé, si vous avez besoin d'une fenêtre d'informations personnalisée, le plugin infobox de google maps doit être utilisé.
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

Implémentation dans mon projet:

screen shot 2016-07-08 at 18 40 56

En outre, pour styliser le marqueur et ajouter une étiquette personnalisée, la bibliothèque google maps "markerwithlabel" doit être utilisée.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js

screen shot 2016-07-08 at 18 40 10

J'ai implémenté cela sur angular1 et google maps natives, mais je ne sais pas comment implémenter la même logique avec angular2 et ce plugin. Ou devrais-je utiliser l'API googlemaps directement comme dans angular1?

@ ddctd143 Vous pouvez probablement y parvenir en utilisant un composant / directive personnalisé placé à l'intérieur de la carte ou du composant de marqueur comme mentionné ici: https://github.com/SebastianM/angular2-google-maps/issues/307#issuecomment -229084829

J'ai intégré la solution ci-dessus dans un Plunkr pour la carte stylisée:

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

Mais je n'ai pas encore trouvé de faire de même pour le marqueur, car j'ai également besoin de l'étiquette avec. Lorsque j'utilise la directive styled-marker, je ne sais pas si je peux obtenir l'instance de marqueur.

@alexjeen Pouvez-vous publier votre problème sur stackoverflow? Il y a quelques mois, j'ai réécrit mon code pour qu'il fonctionne avec cette bibliothèque et google maps. Je répondrais à votre question.

J'essaie d'implémenter MarkerWithLabel en suivant la réponse @ ddctd143 dans stackoverflow mais en obtenant une erreur google non définie sur markerwithlabel.js. Est-ce que quelqu'un sait comment réparer ceci?

@bibr Vous devez l'importer en tant que

@bibr avez-vous déjà réussi à faire fonctionner cela?

@ ryan-morris oui, je dois charger la carte avant marker.js donc dans index.html j'ai ajouté ceci

window.onload = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'assets/js/marker.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }

@bibr @ ddctd143 Obtention d'erreur Zone: angulaire; Valeur: ReferenceError: MarkerWithLabel n'est pas défini lorsque j'utilise le nouveau MarkerWithLabel. Des idées sur la façon dont je peux résoudre ce problème?
`import {Directive, OnInit} depuis '@ angular / core';
import {GoogleMapsAPIWrapper} depuis 'angular2-google-maps / core';
import "../scripts/markerwithlabel.js";

déclarer const Marker WithLabel: any;

@Directif({
sélecteur: 'markerlabel-directive'
})

la classe d'exportation MarkerLabelDirective implémente OnInit {

private map: any;
constructor(private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit() {
this.gmapsApi.getNativeMap().then(map => {
  // instance of the map.
  this.map = map;
  this.initMap();
});

}

initMap () {
var latLng = nouveau google.maps.LatLng (49.47805, -123.84716);
var homeLatLng = nouveau google.maps.LatLng (49.47805, -123.84716);

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 0.75}
 });

 var marker2 = new MarkerWithLabel({
   position: new google.maps.LatLng(49.475, -123.84),
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$395K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 1.0}
 });

 var iw1 = new google.maps.InfoWindow({
   content: "Home For Sale"
 });
 var iw2 = new google.maps.InfoWindow({
   content: "Another Home For Sale"
 });
 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(this.map, this); });
 google.maps.event.addListener(marker2, "click", function (e) { iw2.open(this.map, this); });

}
} `

les mises à jour?

Voici une solution de contournement, à partir de la documentation de l'API google maps, l'étiquette peut être une chaîne ou une spécification d'objet MarkerLabel, donc au lieu d'utiliser une chaîne pour l'étiquette, spécifiez l'objet MarkerLabel et insérez-le en tant que variable, par exemple
`laissez markerLabelObject = {
La couleur rouge",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
texte: nom.élément

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

Oui s'il te plaît. MarkerWithLabel semble être la voie à suivre.
https://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

@nelsonBlack La taille du marqueur augmente-t-elle pour vous? Ce n'est pas pour moi, donc ce n'est pas très utile.

@Ammueliza l' avez-vous fait fonctionner?

Demande d'extraction ajoutée avec cette fonctionnalité

1392

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

J'ai essayé de mettre en œuvre cela maintenant et j'ai échoué. Soit je me trompe, soit cela ne fait pas partie de la dernière version (1.0.0-beta.5)?
ERREUR dans: Impossible de se lier à 'markerWithLabel' car ce n'est pas une propriété connue de 'agm-marker'.
Pour autant que je comprends le code dans le PR, je dois définir cela sur «vrai».

J'ai essayé avec:
Angular 7 (pas encore officiellement pris en charge par la dernière version)
@ agm / [email protected]
[email protected]

Quelqu'un peut-il me dire comment faire fonctionner cela s'il vous plaît?

@pueaau essayait de faire fonctionner cela mais les chemins sont tous surélevés https://www.npmjs.com/package/@ajqua/marker -with-label

Création d'un nouveau dépôt avec les chemins corrects
https://github.com/braxtondiggs/marker-with-label

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Cette page vous a été utile?
0 / 5 - 0 notes