ユーザーの現在地から郡/市/州を取得する

Question

ユーザーがページにアクセスしている場所に基づいてユーザーの郡/市/州の情報にアクセスする必要がある新しいページをWebサイトに構築しています。アプリケーションはHtml5を使用しています。これは、Googleマップのapiや他のものを使用して実現できますか？そうなら、サンプル実装があるところにいくつかのポインタを提供してください。

Answer 1

GoogleマップのJavaScript APIドキュメントにジオロケーションの例を見ることができます：

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

あなただけの都市、州、国を取得するために逆ジオコーディングを追加する必要があります。次のコードスニペットは、あなたがこれまでに試してみました何トリック

var map, infoWindow; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 6 
 
     }); 
 
     infoWindow = new google.maps.InfoWindow; 
 
     var geocoder = new google.maps.Geocoder; 
 

 
     // Try HTML5 geolocation. 
 
     if (navigator.geolocation) { 
 
      navigator.geolocation.getCurrentPosition(function(position) { 
 
      var pos = { 
 
       lat: position.coords.latitude, 
 
       lng: position.coords.longitude 
 
      }; 
 
      
 
      geocoder.geocode({'location': pos}, function(results, status) { 
 
      if (status === 'OK') { 
 
       if (results[0]) { 
 
       var filtered_array = results[0].address_components.filter(function(address_component){ 
 
        return address_component.types.includes("country"); 
 
       }); 
 
       var country = filtered_array.length ? filtered_array[0].long_name: ""; 
 
       filtered_array = results[0].address_components.filter(function(address_component){ 
 
        return address_component.types.includes("locality"); 
 
       }); 
 
       var locality = filtered_array.length ? filtered_array[0].long_name: ""; 
 
       filtered_array = results[0].address_components.filter(function(address_component){ 
 
        return address_component.types.includes("administrative_area_level_1"); 
 
       }); 
 
       var admin_area = filtered_array.length ? filtered_array[0].long_name: ""; 
 
       
 
       
 
       infoWindow.setContent('Location found.<br/>City:'+locality+'<br/>State:'+admin_area+'<br/>Country:'+country); 
 
       infoWindow.setPosition(pos); 
 
       infoWindow.open(map); 
 
       map.setCenter(pos); 
 
       } else { 
 
       window.alert('No results found'); 
 
       } 
 
      } else { 
 
       window.alert('Geocoder failed due to: ' + status); 
 
      } 
 
      }); 
 
      }, function() { 
 
      handleLocationError(true, infoWindow, map.getCenter()); 
 
      }); 
 
     } else { 
 
      // Browser doesn't support Geolocation 
 
      handleLocationError(false, infoWindow, map.getCenter()); 
 
     } 
 
     } 
 

 
     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
 
     infoWindow.setPosition(pos); 
 
     infoWindow.setContent(browserHasGeolocation ? 
 
           'Error: The Geolocation service failed.' : 
 
           'Error: Your browser doesn\'t support geolocation.'); 
 
     infoWindow.open(map); 
 
     }

#map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<div id="map"></div> 
 
<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"> 
 
    </script>