Benötigen Sie Reverse-Geocoding helfen Nachricht an GLatLng anhängen koordinieren

Question

Mein Code : http://jsbin.com/epuxu

Mit Hilfe von SO schaffte ich Adressen geocodiert und ihre entsprechenden Pins auf der Karte platziert zu bekommen. Das Problem ist, , dass ich nicht die Koordinaten, um auswählen kann eine #message div, um es auf der Karte anzuhängen, weil ich die Koordinaten nicht mehr haben.

Ich vermute, dass ich etwas falsch in diesem Abschnitt zu tun:

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

funktioniert es, wenn ich den ursprünglichen Code koordinieren verwenden (diese auf jsbin Kommentar gesetzt ist):

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

, aber ich brauche Hilfe bekommt es mit diesem aktuellen Code zu arbeiten:

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

Ich bin irgendwie neu Google Maps-API zu nutzen, so dass jeder Einblick auf das, was ich falsch mache wäre sehr hilfreich. Dank =]

Answer 1

Ich fürchte, es gab einige Dinge falsch mit Ihrem Code: P

Ich hatte ein wenig plastischer Chirurgie zu tun, aber hier ist das Ergebnis: http://jsbin.com/atofe

Im Folgenden ist eine Beschreibung der Änderungen, die ich gemacht. Lassen Sie mich wissen, wenn Sie Hilfe benötigen, etwas zu verstehen.

---

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

Ich hatte dies kommentieren aus, da es einen Fehler verursacht wurde. Ich vermute, Sie es versehentlich dort links.

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

Da wir Adressen anstelle von Koordinaten verwenden, brauchen Sie nicht zu (in der Tat sollte man nicht, weil es nur die Dinge kompliziert) jede Zeichenfolge in einem Array einzukapseln. Ich benannte sie auch addresses es klarer und zu verhindern, dass Konflikte mit den tatsächlichen Markierungen (dazu später mehr) zu machen.

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

Dies ist, wo ich die meisten Änderungen vornehmen musste. Sie machte ein paar signifikante Fehler hier.

Zuerst Sie wieder verwendet, um die Variable markers, wenn Sie einen neuen Namen verwendet haben soll. Im Prozess schreiben Sie über die Anordnung von Adress-Strings und falsch verstanden, wo die Dinge gespeichert wurden (Dies ist, warum ich das Array von Adressstrings umbenannt addresses).

Zweitens versucht man die Markierungen in die Liste vor der Geocoder tatsächlich zurück seine Antwort hinzuzufügen. Ich glaube, Sie nicht erkennen, dass getLatLng ist eine asynchrone Funktion, so führt er die Callback-Funktion erst nach dem Geocoder gibt seine Antwort. Da Sie nicht auf die Antwort gewartet haben, es machte den „Marker Zur Liste hinzufügen“ Abschnitts nutzlos, da der Marker noch nicht abgerufen worden war.

Also, um diese Probleme zu beheben zog ich den „Marker Zur Liste hinzufügen“ Abschnitt in der neuen handleGeocoderResponse Funktion. Dadurch wird sichergestellt, die Markierungen in die Liste aufgenommen werden erst nach der Geocoder Reaktion zurückgeführt wird. Ich hatte auch eine zwei Schließung zu verwenden, da wir sind Verwendung einer Schleife zusammen mit einer asynchronen Funktion.

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

Ich bin mir nicht sicher, was genau Sie suchen. Mit "#message div", meinst du ein Infofenster wie diese ? Wenn ja, Sie etwas zu den Linien der folgenden (beachten Sie die GEvent.addListener() Linie) tun könnte:

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

Try it aus, gehen Sie eine Markierung klicken! :)