Нужна помощь в обратном геокодировании для добавления сообщения в координату GLatLng

Question

Мой код : http://jsbin.com/epuxu

С помощью SO мне удалось получить адреса, геокодированные и соответствующие метки на карте. Проблема в том, что я не могу выбрать координаты, чтобы добавить к карте элемент div #message, потому что у меня больше нет координат.

Я подозреваю, что я делаю что-то не так в этом разделе

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

это работает, когда я использую оригинальный код координат (это закомментировано в 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;
    }

но мне нужна помощь, чтобы заставить его работать с этим текущим кодом:

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

Я немного новичок в использовании API карт Google, поэтому любая информация о том, что я делаю неправильно, будет очень полезна. Спасибо =]

Answer 1

Боюсь, что с вашим кодом было не так много вещей: P

Мне пришлось сделать небольшую пластическую операцию, но вот результат: http://jsbin.com/atofe

Ниже приведено описание изменений, которые я сделал. Дайте мне знать, если вам нужна помощь в понимании чего-либо.

<Ч>

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

Я должен был это закомментировать, так как это вызывало ошибку. Я предполагаю, что вы оставили его там по ошибке.

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

Поскольку мы используем адреса вместо координат, вам не нужно (на самом деле, не нужно, потому что это только усложняет) инкапсулировать каждую строку в массиве. Я также переименовал его в address , чтобы сделать его более понятным и предотвратить конфликты с фактическими маркерами (подробнее об этом позже).

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

Здесь я должен был сделать большинство изменений. Вы сделали пару существенных ошибок здесь.

Сначала вы повторно использовали переменную markers , когда должны были использовать новое имя. В процессе вы переписали массив адресных строк и неправильно поняли, где что хранилось (поэтому я переименовал массив адресных строк в address ).

Во-вторых, вы пытались добавить маркеры в список до того, как геокодер действительно вернул свой ответ. Я думаю, вы не поняли, что getLatLng является асинхронной функцией, поэтому она выполняет функцию обратного вызова только после того, как геокодер вернет свой ответ. Поскольку вы не ожидали ответа, он отображал " Добавить маркеры в список " раздел бесполезен, так как маркеры еще не найдены.

Итак, чтобы исправить эти проблемы, я переместил " Добавить маркеры в список " раздел внутри новой функции handleGeocoderResponse . Это гарантирует, что маркеры будут добавлены в список только после возвращения ответа геокодера. Мне также пришлось использовать двойное закрытие , поскольку мы используя цикл вместе с асинхронной функцией.

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

Я не уверен, что именно вы ищете. Под #message div " вы подразумеваете информационное окно наподобие это ? Если это так, вы можете сделать что-то из строки следующего (обратите внимание на строку 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]);
}

Попробуйте , нажмите на маркер! :)