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

Posted 2023-02-23

【中文标题】获取用户国家和城市名称并在谷歌地图上定位

【英文标题】：Get user country and city name and locate on google map

【发布时间】：2019-07-23 08:51:38

【问题描述】：

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

<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 怎么输出城市名呢？？

+ 回答您的“请为我写一些代码” 请求：请表明您已先进行了一些研究。请阅读文档，不要指望别人为你编写代码。

【参考方案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>