Necesita ayuda Invertir geocodificación para adjuntar el mensaje a la coordenada GLatLng

Question

Mi código : http://jsbin.com/epuxu

Con la ayuda de SO, logré obtener direcciones geocodificadas y sus correspondientes pines colocados en el mapa. El problema es que no puedo seleccionar las coordenadas para agregar un div #message en el mapa porque ya no tengo las coordenadas.

Sospecho que estoy haciendo algo mal en esta sección:

/* 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());
    }

funciona cuando uso el código de coordenadas original (esto se comenta en 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;
    }

pero necesito ayuda para que funcione con este código actual:

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]);
}

Soy un poco nuevo en la utilización de la API de Google Maps, por lo que cualquier idea de lo que estoy haciendo mal sería muy útil. Gracias =]

Answer 1

Me temo que hubo algunas cosas mal con su código: P

Tuve que hacer un poco de cirugía plástica pero aquí está el resultado: http://jsbin.com/atofe

La siguiente es una descripción de los cambios que hice. Déjame saber si necesitas ayuda para entender algo.

---

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

Tuve que comentar esto porque estaba causando un error. Supongo que lo dejaste allí por error.

<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"]
];

Dado que estamos usando direcciones en lugar de coordenadas, no es necesario (de hecho, no debería hacerlo porque solo complica las cosas) encapsular cada cadena en una matriz. También lo renombré a direcciones para hacerlo más claro y evitar conflictos con los marcadores reales (más sobre eso más adelante).

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);
  });
});

Aquí es donde tuve que hacer la mayoría de los cambios. Has cometido un par de errores importantes aquí.

Primero, reutilizó la variable markers cuando debería haber usado un nuevo nombre. En el proceso, usted escribió sobre la matriz de cadenas de direcciones y no entendió dónde estaban almacenadas las cosas (es por eso que cambié el nombre de la matriz de cadenas de direcciones a direcciones ).

En segundo lugar, intentaste agregar los marcadores a la lista antes , el geocodificador en realidad devolvió su respuesta. Creo que no se dio cuenta de que getLatLng es una función asincrónica, por lo que ejecuta la función de devolución de llamada solo después de que el geocodificador devuelve su respuesta. Como no esperó la respuesta, se representaron los " Agregar marcadores a la lista " sección inútil ya que los marcadores aún no se habían recuperado.

Entonces, para solucionar estos problemas, moví el " Agregar marcadores a la lista " sección dentro de la nueva función handleGeocoderResponse . Esto garantiza que los marcadores se agreguen a la lista solo después de que se devuelva la respuesta del geocodificador. También tuve que usar un doble cierre ya que estamos usando un bucle junto con una función asincrónica.

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

No estoy seguro de qué estás buscando exactamente. Por " #message div " ;, ¿te refieres a un ventana de información como esto ? Si es así, podría hacer algo entre las siguientes líneas (observe la línea 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]);
}

Pruébelo , haga clic en un marcador. :)