Dépliant du centre de popup ET le marqueur sur la carte

Je veux centrer mon marqueur sur popup ouverte.. et le centrage de la carte pas de marqueur latlng, mais sur le centre de marqueur et popup!
Le problème est que popup a dinamic contenu(chargé sur la souris).

La taille de la carte est pleine taille de l'affichage sur un dispositif mobile!
Je suis juste utilisé autoPanPadding option dans une fenêtre mais pas suffisante

Reportez-vous à l'image suivante:

Dépliant du centre de popup ET le marqueur sur la carte

cette solution est intégrée dans KeplerJs code de la structure.

InformationsquelleAutor StefanoCudini | 2014-03-20
  1. 37

    À l'aide de fitzpaddy's réponse, j'ai été en mesure de rendre ce code qui fonctionne et qui est beaucoup plus souple.

    map.on('popupopen', function(e) {
    var px = map.project(e.popup._latlng); //find the pixel location on the map where the popup anchor is
    px.y -= e.popup._container.clientHeight/2 //find the height of the popup container, divide by 2, subtract from the Y axis of marker location
    map.panTo(map.unproject(px),{animate: true}); //pan to new center
});
    • C'est génial, merci beaucoup
    InformationsquelleAutor Dan Mandle
  2. 5

    Ciao Stefano,

    Ce n'est pas testée pseudocode, mais Dépliant projet/unproject fonctions doivent fournir de l'aide.

    je.e;

    //Obtain latlng from mouse event
var latlng;
//Convert latlng to pixels
var px = project(latlng);
//Add pixel height offset to converted pixels (screen origin is top left)
px.y -= mypopup.height/2
//Convert back to coordinates
latlng = unproject(px);
//Pan map
map.panTo(latlng,{animate: true});

    Cela dépend de l'échelle de zoom étant constante au cours du calcul, de sorte que vous pouvez être amené à recadrer la carte, puis de calculer le pan offset pour mettre à jour correctement (en utilisant animation, ce ne sera qu'une transition en douceur).

    Bonne chance!

    InformationsquelleAutor fitzpaddy
  3. 5

    Voici une solution facile:

    D'abord vous centrer la carte sur votre marqueur.

    map.setView(marker.latLng);

    Puis vous ouvrez la fenêtre contextuelle.

    var popup.openOn(map); = L.popup()
    .setLatLng(marker.latLng)
    .setContent(dynamic-content)
    .openOn(map);

    Dépliant sera automatiquement pan de la carte, donc le popup qui s'adapte sur la carte. Pour le faire paraître plus belle que vous pouvez ajouter un margin-top de la fenêtre contextuelle avec les CSS.

    • Merci beaucoup! A la recherche d'une réponse automatique comme cela. Les autres réponses qui a calculé la popup hauteur n'étaient pas de travail pour moi.
    • Le problème avec cette solution est qu'il n'est pas le centre de la pop-up et un marqueur. Il ne assurez-vous que le pop-up est à l'intérieur de la carte visible.
    • Je pense que si vous ajoutez top: 50%; traduire: transformY(-50%); dans le CSS, il serait en réalité dans le centre de la carte.
    InformationsquelleAutor Titsjmen