Home / Questions / 991
Accepted
Chofoteddy
Asked: 2020-12-15 14:52:43 +0800 CST 2020-12-15 14:52:43 +0800 CST

Как получить название текущего города с помощью Google Maps?

  • 772

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

navigator.geolocation.getCurrentPosition(function(pos) {
    var position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
}, function (error) {
    // Código de error
});
javascript

4 Answers

  1. Best Answer

    Используйте google.maps.Geocoder

    К сожалению, эта документация на английском языке.

    Способ использования следующий:

    var geocoder = new google.maps.Geocoder;
geocoder.geocode({
    'location': '<aquí va la latitud y longitud separadas por una coma>' 
     // ej. "-34.653015, -58.674850"
  }, function(results, status) {
      // si la solicitud fue exitosa
      if (status === google.maps.GeocoderStatus.OK) {
        // si encontró algún resultado.
        if (results[1]) {
          console.log(results[1].formatted_address);
        }
      }
});

    Вот рабочий пример:

    initMap();

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -34.653015,
      lng: -58.674850
    }
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No hay resultados');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
    #map {
  height: 300px;
}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACJapLIVhm-uVWitwICh24232jYdkP1SQ&signed_in=true"></script>
<input id="latlng" type="text" value="-34.653015, -58.674850">
<input id="submit" type="button" value="Obtenr Nombre">
<div id="map"></div>

    • 9

  2. Я оставляю вам пример обратной геолокации 

    function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

    Пример взят из: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse .

    • 2

  3. Вот пример разработки погодного виджета, где есть Javascript-метод, где получается город. http://marcodetrabajo.com/widget-meteorologia-jquery/

    var WeatherApi = (function() {
  /* Constantes
   *
   */

  var ENDPOINT = 'http://api.wunderground.com/api/8056d793049f14ea/'; 

  var exports = {};

      /* Función que obtiene, a partir de la latitud y longitud, el nombre de la ciudad y el código del país
       *
       * @param latitude latitud 
       * @idCountry longitude longitud
       */
      exports.getCityAndCountry = function (latitude, longitude){       
        var self = this;
        $.ajax({
          type

: 'GET',
      url: ENDPOINT + 'geolookup/q/'+ latitude +','+ longitude +'.json',
      success: function(coords){            
            self.getWeatherData(coords.location.city, coords.location.country_iso3166);             
      }
    });  
  };


  return exports;
})();

    Вы можете использовать метод следующим образом:WeatherApi.getCityAndCountry(tuLatitud, tuLongitud)

    Ваше здоровье

    • 1

  4. Добрый день... А как быть, когда у вас несколько маркеров или точек...

    Так как у меня есть это... Я получаю из БД json с широтами и долготами... и я хочу показать его в таблице данных, а также на карте с маркерами... Я хочу что-то вроде этого...

    ---широта: 22 | длина: 33 | Адрес геокодера --- широта: 23 | длина: 34 | Адрес геокодера --- широта: 24 | длина: 35 | Адрес геокодера

            $.ajax({
            url: 'db/utilities.php?accion=listar-puntos-busqueda',
            dataType: 'json',
            success: function(resultado){

                if((resultado.length-1) > 0){

                    mostrarPuntos(resultado);
                }                    
            }
        })

var geocoder;
function mostrarPuntos(array) {

    tablaPuntos.clear().draw();

    geocoder = new google.maps.Geocoder();

    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("map"), {
      mapTypeId: 'roadmap'
    });
    map.setTilt(50);

    var coordenadas = new Array();
    for(var i = 1; i < array.length; i++) {

        var coordenada = new Array();
        coordenada.lat = parseFloat(array[i][2]);
        coordenada.lng = parseFloat(array[i][3]);

        var punto = new google.maps.LatLng(coordenada.lat, coordenada.lng);
        bounds.extend(punto);

        geocoder.geocode({'latLng': punto}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: punto,
                        label: array[i][0]
                    });
                    tablaPuntos.row.add( [
                        array[i][0],
                        array[i][1],
                        results[0].formatted_address
                    ] ).draw();
                }
            }
        }); 

        coordenadas.push(coordenada);
        map.fitBounds(bounds);

    }

    var ruta = new google.maps.Polyline({
        path: coordenadas,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 5
    });
    ruta.setMap(map);

}

    Но в момент выполнения... на карте показывается только одна позиция и первые данные в таблице... как будто дальше в геокодерной части дело не пошло...

    Где эта ошибка...??

    Заранее большое спасибо..

    • 0