如何使用谷歌地理定位 API？答案

【问题标题】：How to work with Google geolocation API?如何使用谷歌地理定位 API？
【发布时间】：2017-04-13 09:19:07
【问题描述】：

我正在开展一个网络开发项目，我需要在该项目中获取用户的确切位置信息（例如地区、城市、州和国家/地区）。我该怎么做？

【问题讨论】：

标签： geolocation google-api-php-client web-development-server w3c-geolocation

【解决方案1】：

您可以使用 Google 的地理编码器 和 HTML5 地理定位器 来完成这项工作。您需要为 Google 的 Geocoder 提供地址或纬度 lng，我们将使用 HTML5 Geolocater 获得这些信息。我将向您展示如何执行此操作，但您可以通过我提供的链接在下面阅读有关地理编码的更多信息。无论如何，我们可以使用 HTML5 Geolocater 获取用户的 lat lng。然后，您可以使用 Google 的地理编码器来获取城市、州、街道和邮政编码。 以下是执行此操作的步骤：

首先，将 Google 的 Geocoder 放入一个变量。

var geocoder = new google.maps.Geocoder;

然后用HTML5 Geocoder获取用户的lat lng，并使用Google's Geocoder将其变成地址。

if(navigator.geolocation){

        // call this function to get the location

        navigator.geolocation.getCurrentPosition(function(position) {

            // the results return as a lat lng, 
            //which we will put them into a variable to use in Google's Geocoder 

            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            // Now we can get the location info(city, state, zip) with Google's Geocoder

            geocoder.geocode({'location': pos}, function(results, status) {
                if(status === 'OK'){
                    console.log(results); 
                }
            });
       });
}

然后你可以对结果做任何你想做的事情。希望这会有所帮助！

来源： https://developers.google.com/maps/documentation/javascript/geolocation

【讨论】：

【解决方案2】：

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  <body>
  <div id="navbar"><span>Geolocation API</span></div>
  <div id="wrapper">
    <button id="location-button">Get User Location</button>
    <div id="output"></div>
  </div>

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXYOURXXGOOGLEXXAPIXXKEYXXXX&libraries=places"></script>
  <script>
          $('#location-button').click(function(){

            var location_address_arr = Array();
            var location_address = '';
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);

                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    var latlng = new google.maps.LatLng(lat, lng);
                    var geocoder = geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                          // console.log(results);
                          if(results.length > 0){
                            var place = results[0];

                            var city_long_name = '';

                            var client_company_city = '';
                            var client_company_state = '';
                            var client_company_country = '';
                            var client_company_postal_code = '';

                            for (var i = 0; i < place.address_components.length; i++) {
                                var addressType = place.address_components[i].types[0];
                                var long_name = place.address_components[i].long_name;
                                // alert(addressType);

                                if(city_long_name==''){
                                    if(addressType=='postal_town'){
                                        // city
                                        city_long_name = place.address_components[i].long_name;

                                    } else if (addressType=='administrative_area_level_1'){
                                        // city                
                                        city_long_name = place.address_components[i].long_name;

                                    } else if (addressType=='locality'){
                                        // city
                                        city_long_name = place.address_components[i].long_name;
                                    }
                                }

                                if(addressType=='administrative_area_level_1'){
                                    // state
                                    client_company_state = long_name;
                                }
                                if(addressType=='country'){
                                    // country
                                    client_company_country = long_name;
                                }
                                if(addressType=='postal_code'){
                                    // postal_code
                                    client_company_postal_code = long_name;
                                }
                                // 
                            }
                            client_company_city = city_long_name;

                            // city
                            if(client_company_city!=''){
                              location_address_arr.push(client_company_city);
                            }

                            // state
                            if(client_company_state!=''){
                              location_address_arr.push(client_company_state);
                            }

                            // country
                            if(client_company_country!=''){
                              location_address_arr.push(client_company_country);
                            }

                            // zipcode
                            if(client_company_postal_code!=''){
                              location_address_arr.push(client_company_postal_code);
                            }

                            if(location_address_arr.length > 0){
                              location_address = location_address_arr.join(', ');
                            }
                            alert(location_address);

                          }
                        }
                    });

                });

            }

          });
  </script>
  </body>
</html>

【讨论】：