Comment précisément la place d'un élément div sur une carte à l'aide du dépliant de js?
J'ai essayé ce couple de façons, mais n'ont pas été en mesure de le faire fonctionner. Je veux mettre les horloges en haut de la carte dans plusieurs fuseaux horaires. J'ai un javascript pour créer de l'horloge et je place de l'horloge dans un div
élément.
Voici ce que j'ai essayé:
- Créer un Point avec
0,0
coordonnées. - À partir de ce point d'obtenir la latitude de la valeur pour le haut de la carte à l'aide de
containerPointToLatLng
. - Créer
LatLng
à l'aide de la lat et long pour le fuseau horaire. - Converti ce
LatLng
à Point et puis le positionnement de l'élément div avec lax,y
à partir de ce point.
J'exécute la logique à la fois lorsque la page est rendu pour la première fois et ensuite sur le corps de redimensionnement. Cependant, si je change la taille de la fenêtre du navigateur, l'horloge ne pas le positionner correctement.
Des suggestions?
- Voulez-vous d'avoir plusieurs horloges à la fois sur la carte? Pourriez-vous poster quelques violon?
- n'hésitez pas à expliquer la raison de votre offrant une grande générosité sur ce vieux post. Votre cas peut différer quelque peu de ce qui est décrit ici.
- Je suis à la recherche de la possibilité de placer un élément HTML sur n'importe quel endroit sur la carte. L'idée était d'avoir une carte météorologique où je peux rendre des choses comme info de la température en utilisant le HTML plutôt que de générer une image - mais je me rends compte (et plus encore après la lecture de votre post) que c'est beaucoup plus compliqué qu'il ne paraît au premier coup d'œil.
- eh bien, si votre élément HTML est fixe par rapport à la carte de base (c'est à dire similaire à un marqueur de), vous devez simplement utiliser un
L.divIcon
dans un marqueur, ou mêmeL.popup
(peut-être avec un petit hack pour permettre à plusieurs simultanément ouvrir les pop-up). Aucun autre hack nécessaire. Mon post ci-dessous est pour le cas où vous souhaitez que votre Élément à déplacer horizontalement, mais toujours rester sur le haut de la carte conteneur. N'hésitez pas à ajouter plus de détails à votre besoin, ou même d'ouvrir une nouvelle question. - oh, je n'avais pas remarqué la
divIcon
ou pas rendu compte de ce qu'il fait. Merci, je vais vérifier que l'un et d'être en contact, si j'ai d'autres questions! (Indépendamment de cela, je serai plus qu'heureux d'attribution de la prime à l'excellence de votre réponse une fois la fin de la période.)
Vous devez vous connecter pour publier un commentaire.
Pour répondre à l'OP est sur le point précis, c'est à dire comment faire pour re-position de l'horloge lorsque la fenêtre du navigateur est redimensionnée (d'où la carte contenant les dimensions ont peut-être changé), on devrait probablement juste de re-calculer la position de l'horloge sur la carte de
"redimensionner"
événement.Cependant, il n'est pas clair si l'OP a placé l'horloge comme un enfant de la carte conteneur, ou quelque part sur la page arborescence DOM.
Il est probablement plus facile de le placer comme un enfant de la carte, de sorte que sa position est toujours par rapport à la carte conteneur.
Ce que l'OP initialement demandé?
Si je comprends bien l'original, le résultat souhaité, l'OP voulez ajouter une horloge (ou quelle que soit l'information) sur le haut d'une position géographique particulière (ville de Toronto, dans ce cas, [UTC -5], selon les commentaires).
Toutefois, les informations conteneur ne doit pas jeter sur un fond de carte de position fixe, c'est à dire pas à une précision géographique coordonnées du point (comme un marqueur ou un popup serait), mais en haut de la carte conteneur, de la même façon à un Contrôle (d'où iH8 d'origine de réponse).
Sauf qu'il ne doit pas être totalement fixé à l'intérieur de la carte conteneur, mais horizontalement déplacer avec la ville (ou quel que soit spécifié coordonnées géographiques). Donc OP commentaire iH8 de réponse.
Par conséquent, il sonne comme quelque chose de semblable à ce site, sauf avec un interactives (naviguer sur-mesure) et la carte des "UTC-5" en-tête remplacé par une horloge (ou quelle que soit l'information, d'où un conteneur HTML devrait le faire) et horizontalement suivant Toronto.
Mettre différemment, l'horloge doit s'asseoir à un particulier de la ligne verticale, c'est à dire /longitude du méridien.
Malheureusement, même 2 ans et demi après la question est posté, il n'y a pas encore de Notice plugin qui fournit des fonctionnalités de ce type (au moins à l'intérieur de Notice page des plugins).
L'extension au cas d'utilisation à très zoomée de la carte...
Cela étant dit, et compte tenu du fait que l'utilisateur peut être en mesure de zoom très dans la ville (OP n'a pas précisé le niveau de zoom maximum), il pourrait ne pas être une très bonne expérience de l'utilisateur ayant l'horloge horizontale suivi d'un précis longitude: par exemple, il pourrait suivre Toronto centre de gravité /hôtel de ville /quel que soit l'endroit particulier, et lorsque l'utilisateur est zoomée à un autre quartier de la ville, l'horloge n'est plus visible, alors qu'il/elle est toujours de la visualisation d'une partie de la ville de Toronto...
D'étendre ce cas d'utilisation, l'horloge doit très probablement être visible quel que soit le domaine, il s'applique, c'est à dire dès que l'affichage de la carte de port croise les associés fuseau horaire.
L'extension au cas d'utilisation hautement zoom-out de la carte...
Un autre point qui n'est pas détaillée par l'OP, est de savoir quoi faire quand les places de fuseaux horaires différents sont visibles dans la vue de la carte de port? Dans le site mentionné ci-dessus, nous avons un en-tête par visible fuseau horaire, qui semble la plus complète d'informations que nous pouvons obtenir.
Mais depuis Dépliant permet de zoomer jusqu'au niveau 0, où tout le monde (c'est à dire essentiellement les 24 fuseaux horaires /39 selon Wikipedia, n'incluant pas l'effet potentiel de l'Heure d'été - heure d'été) est représenté avec une 256 pixels de large, il y a peu de place pour s'adapter à toutes ces horloges, si chacun doit être aligné verticalement avec ses associés de fuseau horaire.
Pour maintenant, supposons que nous ne se soucient pas si les horloges se chevauchent.
Encore plus de cas personnalisés...
Mais les OP peuvent avoir souhaité pour afficher l'horloge que pour des endroits en particulier, pas pour le monde entier. L'OP n'a même pas dire que les horloges serait différent (nous pourrions avoir des horloges pour les villes dans le même fuseau horaire, même s'il pourrait être plus intéressant d'avoir ces horloges s'asseoir à côté de leur ville - même sur le pair avec leur latitude, de sorte qu'il est plus facile de repérer ce qui ville de l'horloge est associé, comme dans le cas de 2 villes sur le même méridien; mais dans ce cas, un marqueur avec
L.divIcon
serait suffisant).Donc une coutume cas serait de ne pas considérer officiel des fuseaux horaires, mais du développeur des zones spécifiées.
Donc, on oublie à propos de la latitude et essayer d'aligner une horloge à la verticale au-dessus de la zone, tant qu'il croise la vue de la carte de port.
Décrivant une solution générique
Par conséquent, il ressemble à un générique solution serait de permettre au développeur de l'application pour spécifier un tableau d'Éléments HTML, chacune associée à une gamme de longitudes (ce pourrait être aussi une zone /polygone).
Le temps des zones de cas d'utilisation serait alors un cas particulier où les zones définies sont tout simplement ceux de la fuseaux horaires.
Ensuite, chaque Élément doit être visible si et seulement si son secteur associé croise le port de la vue (par conséquent, nous introduisons une possibilité de le cacher lorsque l'intervalle de latitude est hors de vue).
Comme pour le positionnement, nous allons choisir:
HTML:
CSS:
JavaScript:
Démo Live: http://plnkr.co/edit/V2pvcva5S9OZ2N7LlI8r?p=preview
Généralement on utilise L. de Contrôle pour créer un contrôle personnalisé qui vous pouvez ensuite ajouter à la couche de contrôle. Si vous le faites, un dépliant sera de prendre soin de positionnement lors du redimensionnement de la carte. Jetez un oeil à la référence de L. de Contrôle: http://leafletjs.com/reference.html#control
Il est un exemple d'un contrôle personnalisé à la référence: http://leafletjs.com/reference.html#icontrol Si vous souhaitez voir plus d'exemples, vous pouvez consulter l'un des nombreux de contrôle personnalisé des plugins pour voir comment ils ont mis en œuvre de L. de Contrôle: http://leafletjs.com/plugins.html (en vertu de Contrôle et d'interaction)
Le seul inconvénient de L. de Contrôle, c'est que vous ne pouvez pas la position d'un contrôle à la verticale ou à l'horizontale centrée. Vous ne pouvez utiliser topleft, haut, bottomleft & bottomright.