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

如何通过谷歌地图获取当前城市的名称？

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

}

    但是在执行的那一刻……地图上只显示了一个位置，表中的第一个数据……就好像在geocoder部分没有走得更远……

    这个错误在哪里......？？

    事先非常感谢。。

    • 0