如何使用 Google 地理定位 API？

Question

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

Answer 1

您可以使用 Google 的 Geocoder 和 HTML5 Geolocater 来完成此操作。您需要为 Google 的 Geocoder 提供地址或经纬度，我们将使用 HTML5 Geolocater[=36] =].我将向您展示如何执行此操作，但您可以使用我提供的 link 在下面阅读有关地理编码的更多信息。无论如何，我们可以使用 HTML5 Geolocater 获取用户的经纬度。然后您可以使用 Google 的地理编码器来获取城市、州、街道和邮政编码。 执行此操作的步骤如下：

首先，将Google的地理编码器放入变量。

var geocoder = new google.maps.Geocoder;

然后 使用 HTML5 Geocoder 获取用户经纬度 并使用 Google的地理编码器使其成为一个地址。

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

Answer 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>

如何使用 Google 地理定位 API？

How to work with Google geolocation API?

geolocation

google-api-php-client

web-development-server

w3c-geolocation