Как я могу отобразить адрес моего геокода в информационном окне?API карт Google - PullRequest
Новая
       17

Как я могу отобразить адрес моего геокода в информационном окне?API карт Google

1 голос
/ 11 января 2012

Я использую геолокацию для получения адреса мест в моем API карт Google, просматривая долготу и широту и возвращая результаты на мою страницу для использования в моей базе данных.

Мне не удалось отобразитьэти результаты отображаются в моем информационном окне на моей карте.

Как я могу использовать приведенный ниже код для включения адреса в мое информационное окно.В настоящее время он отображает long и lat со следующим кодом: 

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
infowindow.open(map, marker);

Функция geocodePosition ищет адрес координат и добавляет его к вводу html в моей форме.

Как можноЯ также адаптирую его для обновления информационного окна.Я попробовал много методов сейчас, но безуспешно.Есть идеи ?? 

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);

    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').value = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').value = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').value = str;
}


function initialize() { 

  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Property location marker',
    map: map,
    draggable: true
  });

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        var infowindow = new google.maps.InfoWindow();

        autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

});

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });

  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());

        //Show property address in window
    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Ответы [ 2 ]

4 голосов
/ 11 января 2012

marker.getPosition() не собирается указывать адрес улицы.Учитывая ваш текущий код, вам лучше всего перейти: 

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');

в вашу функцию geocodePosition(), а затем передать объект infowindow в качестве второго аргумента этой функции.

Таким образом, в вашей функции initialize() вы бы изменили вызовы на geocodePosition, включив второй аргумент: 

function initialize() {

...

  geocodePosition(marker.getPosition(), infowindow);

}

Затем в вашей функции geocodePosition() вы примете второй аргумент и обновите его с помощьюresponses[0].formatted_address value.Я добавил переменные, чтобы было легче передавать значения для адреса и сообщения. 

function geocodePosition(pos, infowindow) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      var address = responses[0].formatted_address;      
      updateMarkerAddress(address);
      infowindow.setContent('<div><strong>' + address + '</strong><br>');

    } else {
      var msg = 'Cannot determine address at this location.';      
      updateMarkerAddress(msg);
      infowindow.setContent('<div><strong>' + msg + '</strong><br>');
    }
  });
}
0 голосов
/ 11 января 2012

Возможно, вы захотите использовать API карты Google - http://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests

Есть и другие API, которые дадут вам то же самое, но большинство из них будут стоить денег, и с Google вы получите много «миль» бесплатно.

...