web-dev-qa-db-fra.com

comment passer des données avec un marqueur dans la brochure js

J'utilise le dépliant js avec openstreetmap dans mon projet.
J'ai plusieurs cercles au même endroit sur ma carte.
Je veux stocker des identifiants dans ces cercles afin que je puisse identifier celles dont les données doivent être référées lorsque l'on clique sur les cercles.

Mon circlemarker est 

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.addTo(map);

Ici, j’utilise le titre à d’autres fins, c’est pourquoi je ne peux pas l’utiliser.
Quelqu'un peut-il me dire un moyen de le faire?.

javascriptleaflet
21
vaibhav shah

Il semble que vous souhaitiez ajouter de nouvelles fonctionnalités (fonctions, propriétés, etc.) à une classe existante. Il serait logique d’utiliser des principes orientés objet pour cela. Dans ce but, je vous recommanderais d'étendre la classe CircleMarker pour ajouter ces propriétés.

customCircleMarker = L.CircleMarker.extend({
   options: { 
      someCustomProperty: 'Custom data!',
      anotherCustomProperty: 'More data!'
   }
});

Désormais, lorsque vous créez votre marqueur de cercle, créez une instance de votre objet étendu. 

var myMarker = new customCircleMarker(myPoint, { 
    title: 'unselected',
    radius: 20,
    someCustomProperty: 'Adding custom data to this marker!',
    anotherCustomProperty: 'More custom data to this marker!'
});
myMarker.addTo(map);

Vous pouvez maintenant obtenir les propriétés comme n'importe quelle autre option du marqueur. Il ne s'agit que d'un simple cas d'extension et vous pouvez en faire plus, en ajoutant d'autres propriétés ou fonctions à l'objet.

Exemple JSFiddle: JSFiddle

38
Patrick D

Avec la version actuelle de leaflet (0.8-dev), vous pouvez simplement définir vos propriétés personnalisées sur l'objet marqueur lui-même, sans avoir à créer une classe de marqueur personnalisée.

function map() {
    return L.map('leaflet-canvas',
    {
        maxZoom: 10,
        minZoom: 0,
        crs: L.CRS.Simple
    });
}

var map = map().setView([0, 0], 10).on('click', onMapClick);

function onMapClick(e) {
    var marker = L.circleMarker(e.latlng, {draggable:true});

    marker.myCustomID = Math.floor((Math.random() * 100) + 1);

    marker.on('click', onMarkerClick);

    map.addLayer(marker);

    // 'click' the new marker to show the ID when marker created
    marker.fireEvent('click');
}

function onMarkerClick(e) {
    alert(e.target.myCustomID);
}
15
Stackman

pour compléter le tableau, créer un gestionnaire qui répondra à un clic de souris sur un marqueur et donnera accès aux nouvelles options 

function onMarkerClick(e) {
    console.log("You clicked the marker " + e.target.options.someCustomProperty);
    console.log("You clicked the marker " + e.target.options.anotherCustomProperty);
}
marker.on('click', onMarkerClick);
4
geegee

le marqueur est essentiellement un objet javascript rite.

L'extrait ci-dessous résout mon cas simplement.

var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick);
    marker.key = "marker-1";

    var marker2 =new  L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick);
    marker2.key = "marker-2";

    function onClick(e) {   
    alert(this.key); // i can expect my keys here
}
3
Andi AR

Je recommanderais de structurer vos données pour vos marqueurs au format standard GeoJSON, ce qui le rend compatible pour l'enregistrement direct en tant que fichier de formes, etc.

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 });
myMarker.properties.id = your_Id;
myMarker.addTo(map);

Pour récupérer les informations stockées et les utiliser ou les transmettre à d'autres parties de votre programme, en affichant un exemple de fonction onclick:

myMarker.on('click',markerOnClick);
function markerOnClick(e) {
  my_ID = e.layer.properties.id;
  console.log(my_ID, e.latlng);
  // do whatever you want with my_ID
}

Il m'a fallu un certain temps pour savoir comment e.layer.properties accéder aux propriétés du marqueur cliqué, alors espérons que cela aidera quelqu'un. La plupart des autres exemples ne traitaient que de la longueur du marqueur, e.latlng. Notez que vous pouvez utiliser ce même code même avec un calque/groupe de marqueurs entier. La fonction fonctionnera sur chaque marqueur individuel.

0
Nikhil VJ

Voici une méthode plus conviviale avec TypeScript:

DataMarker.ts 

import * as L from 'leaflet';

export class DataMarker extends L.Marker {
  data: any;

  constructor(latLng: L.LatLngExpression, data: any, options?: L.MarkerOptions) {
    super(latLng, options);
    this.setData(data);
  }

  getData() {
    return this.data;
  }

  setData(data: any) {
    this.data = data;
  }
}

SomeOtherFile.ts 

import { DataMarker } from './DataMarker';

const marker = new DataMarker([ lat, lng ], anyData, markerOptions);

-

Note 1 : J'ai décidé de ne pas fusionner les options de marqueur avec la propriété data

Note 2 : Ajustez le type de données si vous avez besoin de quelque chose de plus spécifique.

0
Michael P. Bazos