Dépliant panTo (ou setview)?

Je veux créer un panTo -fonction. Lorsque je clique sur un lien de la carte des casseroles pour les coordonnées. Mais je ne sais pas comment faire pour passer la valeur à la fonction. Je suis en commençant par donner le lien de la Pointfield (pt) valeur comme ceci:

<a href="#" class="marker" value="{{ mymodel.pt }}">Link</a>

Puis j'ai essayé ceci:

$("#dialog").on("click", ".marker", function(e) {
    e.preventDefault();
    map.panTo($(this).attr("value"));
    });

Cela ne fonctionne pas. Je pense que c'est un champ d'application-problème où la fonction cant lire la "carte" de la variable, car il n'est pas sous l'initiale de la carte de script.

Donc ma prochaine idée est de créer un "panTo" fonction et de la place sous le premier script de carte (ce qui serait le droit de la portée) et d'appeler cette fonction à partir de l'événement click à la place. Pas sûr que ça marcherait, mais Im me demandais comment faire pour passer de la "valeur" à partir du lien?

Merci pour vos réponses!

Demandez plus de précisions: voulez-vous votre carte pour avoir une animation de pan à l'emplacement ou tout simplement afficher un emplacement basé sur un bouton? L'ancien n'a pas été pris en charge depuis les premières versions de notice, mais ce dernier est certainement faisable.
hey merci pour votre réponse! Il n'est pas si important. Ce que je veux, c'est être en mesure de faire la liste des objets à partir de ma base de données dans une boîte de dialogue avec la carte en arrière-plan. Chaque objet a un lien et quand vous cliquez dessus, la carte va au coordonnées. Quelque chose comme ça.

OriginalL'auteur user3199840 | 2014-02-11

  1. 5

    Vous pouvez ajouter la navigation de votre carte en utilisant data attributs dans votre code HTML. Enregistrer la latitude,la longitude et zoom de quelque chose comme data-position et ensuite appeler ces valeurs avec un peu de JavaScript lorsque l'utilisateur clique sur la balise d'ancrage. Voici un peu de code pour illustrer.

    <div id="map">
    <div id="map-navigation" class="map-navigation">
        <a href="#" data-zoom="12" data-position="37.7733,-122.4367">
            San Francisco
        </a>
    </div>
</div>

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);

document.getElementById('map-navigation').onclick = function(e) {
    var pos = e.target.getAttribute('data-position');
    var zoom = e.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var loc = pos.split(',');
        var z = parseInt(zoom);
        map.setView(loc, z, {animation: true});
        return false;
    }
}
</script>
    Génial! Grande réponse. Je vais jouer avec ça et voir si je peux le faire fonctionner! Merci man
    Je suis en train de mettre le script dans ma "$(document).ready(function () {" où j'ai également déclarer ma carte, vignette de la couche et où certains ont d'autres fonctions liées à la carte. Je me demande si je dois conclure en quelque sorte? Ou si j'ai besoin de déclarer la boîte de dialogue? Parce que j'ai mis à l'ancre du lien de l'enfant-html dont j'ai la charge dans un dialogue jquery sur la page principale.

    OriginalL'auteur geraldarthur