0

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

4

2 回答 2

1

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

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

var geocoder = new google.maps.Geocoder;

然后使用HTML5 Geocoder抓取用户 lat lng并使用Google 的 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

于 2017-04-27T21:38:23.590 回答
0 
<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>
于 2020-03-12T13:55:17.293 回答