Besoin d'aide Reverse Geocoding pour ajouter un message à la coordonnée GLatLng

Question

Mon code : http://jsbin.com/epuxu

Avec l'aide de SO, j'ai réussi à obtenir des adresses géocodées et leurs épingles correspondantes placées sur la carte. Le problème est que je ne puisse pas sélectionner les coordonnées pour y ajouter un div de #message sur la carte, car je n'ai plus les coordonnées.

Je pense que je fais quelque chose de mal dans cette section:

/* Message
--------------------*/
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        $("#message").hide();

        var moveEnd = GEvent.addListener(map, "moveend", function(){
            var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
            $("#message")
                .fadeIn()
                .css({ top:markerOffset.y, left:markerOffset.x });

            GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
    }

ça marche quand j'utilise le code de coordonnées original (c'est commenté sur jsbin):

var markers = [
    [39.729308,-121.854087],
    [39.0,-121.0]
    ];

    for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(markers[i][0], markers[i][1]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        markers[i] = marker;
    }

mais j'ai besoin d'aide pour le faire fonctionner avec ce code actuel:

function showAddress(markers) {
    if (geocoder) {
        geocoder.getLatLng(markers,
            function(point) {
                if (!point) {
                    alert(markers + " not found");
                } else {
                    marker = new GMarker(point);
                    map.addOverlay(marker);
                    markers[i] = marker;
                }
            }
        );
    }
}

for (var i = 0; i < markers.length; i++) {
    showAddress(markers[i]);
}

Je suis un peu nouveau à l’utilisation de l’API Google Maps, donc toute idée de ce que je fais mal serait très utile. Merci =]

Answer 1

Je crains que votre code ne soit pas sans défaut: P

J'ai dû faire un peu de chirurgie plastique mais voici le résultat: http://jsbin.com/atofe

Vous trouverez ci-dessous une description des modifications apportées. Faites-moi savoir si vous avez besoin d'aide pour comprendre quoi que ce soit.

<script type="text/javascript">
  document.write(marker);
</script>

Je devais commenter ceci car cela causait une erreur. Je suppose que vous l'avez laissé par erreur.

<script type="text/javascript">
  // document.write(marker);
</script>

var markers = [
  ["624 Nord Ave #20, Chico CA"],
  ["200 Nord Ave, Chico CA"],
  ["100 Nord Ave, Chico CA"],
  ["5th and Ivy, Chico CA"]
];

Puisque nous utilisons des adresses au lieu de coordonnées, vous n'avez pas besoin (en fait, vous ne devriez pas, car cela ne fait que compliquer les choses) pour encapsuler chaque chaîne d'un tableau. Je l'ai également renommé en adresses pour le rendre plus clair et éviter les conflits avec les marqueurs réels (pour plus d'informations à ce sujet plus tard).

var addresses = [
  "624 Nord Ave #20, Chico CA",
  "200 Nord Ave, Chico CA",
  "100 Nord Ave, Chico CA",
  "5th and Ivy, Chico CA"
];

function showAddress(markers) {
  if (geocoder) {
    geocoder.getLatLng(markers,
      function(point) {
        if (!point) {
          alert(markers + " not found");
        } else {
          marker = new GMarker(point);
          map.addOverlay(marker);
          markers[i] = marker;
        }
      }
    );
  }
}

for (var i = 0; i < markers.length; i++) {
  showAddress(markers[i]);
}


/* Add Markers to List
--------------------*/
$(markers).each(function(i,marker){
  $("<li>")
    .html(i+" - "+marker)
    .click(function(){
      displayPoint(marker, i);
    })
    .appendTo("#list");
  GEvent.addListener(marker, "click", function(){
    displayPoint(marker, i);
  });
});

C'est là que j'ai dû faire le plus de changements. Vous avez commis quelques erreurs importantes ici.

Tout d'abord, vous avez réutilisé la variable marqueurs lorsque vous auriez dû utiliser un nouveau nom. Au cours du processus, vous avez écrit sur le tableau de chaînes d’adresses et mal compris où les choses étaient stockées (c’est pourquoi j’ai renommé le tableau de chaînes d’adresses en adresses ).

Deuxièmement, vous avez essayé d'ajouter les marqueurs à la liste avant le géocodeur a effectivement renvoyé sa réponse. Je pense que vous n'avez pas compris que getLatLng est une fonction asynchrone. Elle n'exécute donc la fonction de rappel qu'après que le géocodeur a renvoyé sa réponse. Comme vous n’avez pas attendu la réponse, l’option "Ajouter des marqueurs à la liste" a été restituée. section inutile car les marqueurs n’ont pas encore été récupérés.

Pour résoudre ces problèmes, j'ai donc déplacé l'option "Ajouter des marqueurs à la liste". section à l'intérieur de la nouvelle fonction handleGeocoderResponse . Cela garantit que les marqueurs ne sont ajoutés à la liste qu'après le retour de la réponse du géocodeur. Je devais également utiliser une double clôture depuis que nous sommes utilisant une boucle avec une fonction asynchrone.

function handleGeocoderResponse(addr, j) {
  /*
    These are closures. We have to return a function
    that contains our Geocoder repsonse handling code
    in order to capture the values of "addr" and "j"
    as they were when they were passed in.  
  */
  return (function(point) {

    if (!point) {
      alert(addr + " not found");
    }
    else {
      var marker = new GMarker(point);
      map.addOverlay(marker);

      /* Add markers to list
      ------------------------*/
      $("<li>")
        .html(j + " - " + addr)
        .click(function(){
          displayPoint(marker, j);
        })
        .appendTo("#list");

      GEvent.addListener(marker, "click", function(){
        displayPoint(marker, j);
      });
    }

  });
}

for (var i = 0; i < addresses.length; i++) {
  if (geocoder) {
    var address = addresses[i];
    geocoder.getLatLng(
      address,
      handleGeocoderResponse(address, i)
    );
  }
}

Answer 2

Je ne suis pas sûr de ce que vous cherchez exactement. Par " #message div ", voulez-vous dire un fenêtre d'information comme ceci ? Si tel est le cas, vous pouvez faire quelque chose parmi les lignes suivantes (notez la ligne GEvent.addListener () ):

/* Geocoded Addresses
--------------------*/
var markers = [
 ["624 Nord Ave #20, Chico CA"],
 ["200 Nord Ave, Chico CA"],
 ["100 Nord Ave, Chico CA"],
 ["5th and Ivy, Chico CA"]
];

function showAddress(markers) {
 if (geocoder) {
  geocoder.getLatLng(markers,
   function(point) {
    if (!point) {
     alert(markers + " not found");
    } else {
     marker = new GMarker(point);
     GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml('<strong>Awesome place</strong><br>746 Blah street<br>1337 Awesomeville');
     });
     map.addOverlay(marker);
     markers[i] = marker;
    }
   }
  );
 }
}

for (var i = 0; i < markers.length; i++) {
 showAddress(markers[i]);
}

Essayez-le , cliquez sur un marqueur! :)