获取用户国家和城市名称并在谷歌地图上定位答案

【问题标题】：Get user country and city name and locate on google map获取用户国家和城市名称并在谷歌地图上定位
【发布时间】：2026-02-04 02:15:02
【问题描述】：

我想在谷歌地图上显示用户的当前位置和国家名称，城市名称我尝试显示未定义的国家和城市名称的代码，如何在谷歌地图上显示国家和城市名称

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMnYWXbdpKU3t__MXrRMLAMer23E6gRjs"></script>
<script type="text/javascript">
if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function (p) {

        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        console.log(LatLng);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        console.log(map); 
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude+"<br/>Country:"+p.coords.country+"<br/>city:"+p.coords.city
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    });
} else {
    alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>

【问题讨论】：

您需要使用一些地理编码 API 对纬度/经度进行地理编码......浏览器不会在对 navigator.geolocation.getCurrentPosition 的回调中为您提供该信息 - 要查看浏览器确实为您提供了什么，请阅读the documentation for the [position object 和前面提到的位置对象的坐标属性](developer.mozilla.org/en-US/docs/Web/API/Coordinates) - 没有你可以看到的城市/国家属性
您希望代码做什么？使用谷歌记录的地理编码 API 来确定给定纬度/经度的城市/国家？或者，也许您可以阅读谷歌自己的示例代码developers.google.com/maps/documentation/javascript/examples/…
console.log(p.coords); 输出什么？一个东西。它有country 和city 键吗？不是。那么你希望p.coords.city 怎么输出城市名呢？？
+ 回答您的“请为我写一些代码” 请求：请表明您已先进行了一些研究。请阅读文档，不要指望别人为你编写代码。

标签： javascript google-maps geolocation

【解决方案1】：

您需要对 Geolocation 服务返回的位置进行反向地理编码以获取国家和城市信息。

 geocoder.geocode({
    'location': LatLng
  }, function(results, status) {
    console.log("geocoder callback status=" + status);
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        // from "Google maps API, get the users city/ nearest city/ general area"
        // https://*.com/questions/50081245/google-maps-api-get-the-users-city-nearest-city-general-area
        var details = results[0].address_components;
        var city;
        var country;
        console.log(JSON.stringify(details));
        for (var i = details.length - 1; i >= 0; i--) {
          for (var j = 0; j < details[i].types.length; j++) {
            if (details[i].types[j] == 'locality') {
              city = details[i].long_name;
            } else if (details[i].types[j] == 'sublocality') {
              city = details[i].long_name;
            } else if (details[i].types[j] == 'neighborhood') {
              city = details[i].long_name;
            } else if (details[i].types[j] == 'postal_town') {
              city = details[i].long_name;
              console.log("postal_town=" + city);
            } else if (details[i].types[j] == 'administrative_area_level_2') {
              city = details[i].long_name;
              console.log("admin_area_2=" + city);
            }
            // from "google maps API geocoding get address components"
            // https://*.com/questions/50225907/google-maps-api-geocoding-get-address-components
            if (details[i].types[j] == "country") {
              country = details[i].long_name;
            }
          }
        }
        console.log("city=" + city);
        var marker = new google.maps.Marker({
          position: LatLng,
          map: map,
          title: "<div style = 'height:80px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude + "<br/>Country:" + country + "<br/>City:" + city
        });
        google.maps.event.addListener(marker, "click", function(e) {
          var infoWindow = new google.maps.InfoWindow();
          infoWindow.setContent(marker.title);
          infoWindow.open(map, marker);
        });
        google.maps.event.trigger(marker, 'click');
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });

proof of concept fiddle

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('dvMap'), {
    zoom: 8,
    center: {
      lat: 40.731,
      lng: -73.997
    }
  });
  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(p) {
      var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
      console.log(LatLng);
      var mapOptions = {
        center: LatLng,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map.setOptions(mapOptions);
      geocoder.geocode({
        'location': LatLng
      }, function(results, status) {
        console.log("geocoder callback status=" + status);
        if (status === 'OK') {
          if (results[0]) {
            map.setZoom(11);
            // from "Google maps API, get the users city/ nearest city/ general area"
            // https://*.com/questions/50081245/google-maps-api-get-the-users-city-nearest-city-general-area
            var details = results[0].address_components;
            var city;
            var country;
            console.log(JSON.stringify(details));
            for (var i = details.length - 1; i >= 0; i--) {
              for (var j = 0; j < details[i].types.length; j++) {
                if (details[i].types[j] == 'locality') {
                  city = details[i].long_name;
                } else if (details[i].types[j] == 'sublocality') {
                  city = details[i].long_name;
                } else if (details[i].types[j] == 'neighborhood') {
                  city = details[i].long_name;
                } else if (details[i].types[j] == 'postal_town') {
                  city = details[i].long_name;
                  console.log("postal_town=" + city);
                } else if (details[i].types[j] == 'administrative_area_level_2') {
                  city = details[i].long_name;
                  console.log("admin_area_2=" + city);
                }
                // from "google maps API geocoding get address components"
                // https://*.com/questions/50225907/google-maps-api-geocoding-get-address-components
                if (details[i].types[j] == "country") {
                  country = details[i].long_name;
                }
              }
            }
            console.log("city=" + city);
            var marker = new google.maps.Marker({
              position: LatLng,
              map: map,
              title: "<div style = 'height:80px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude + "<br/>Country:" + country + "<br/>City:" + city
            });
            google.maps.event.addListener(marker, "click", function(e) {
              var infoWindow = new google.maps.InfoWindow();
              infoWindow.setContent(marker.title);
              infoWindow.open(map, marker);
            });
            google.maps.event.trigger(marker, 'click');
          } else {
            window.alert('No results found');
          }
        } else {
          window.alert('Geocoder failed due to: ' + status);
        }
      });
    });
  } else {
    alert('Geo Location feature is not supported in this browser.');
  }
}

html,
body,
#dvMap {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="dvMap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

【讨论】：