查找用户的地理位置，然后输出php - Finding GEO Location of user, then outputting php

Finding GEO Location of user, then outputting php

我想让我的网站告诉浏览器询问用户"分享你的位置"

一旦共享了位置，我希望输出是基于不同的位置，

那么位置A(英国)将输出div1,div2,div3

位置B(非洲)将输出div4div5div6

等

这不是基于实际的房屋位置，而是基于区域。这是可能的吗?如果是，又是如何做到的?

这应该能奏效:

index . html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="init.js"></script>
    </head> 
    <body>
        <input type="text" id="location">
        <div style="display: none;" id="div1">Div 1</div>
        <div style="display: none;" id="div2">Div 2</div>
        <div style="display: none;" id="div3">Div 3</div>
        <div style="display: none;" id="div4">Div 4</div>
        <div style="display: none;" id="div5">Div 5</div>
        <div style="display: none;" id="div6">Div 6</div>
    </body>
</html>

init.js:

$(document).ready(function($){
    $("#location").on("input", function(){
        var client = new XMLHttpRequest();
        client.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address=" + $("#location").val() + "&key=API KEY HERE", true);
        client.onreadystatechange = function() {
           if(client.readyState == 4) {
               var results = JSON.parse(client.responseText);
               if(results.results[0].address_components[0].short_name == 'GB') {
                   $('#div1, #div2, #div3').show();
                   $('#div4, #div5, #div6').hide();
               } else if (results.results[0].address_components[0].short_name == 'Africa') {
                   $('#div4, #div5, #div6').show();
                   $('#div1, #div2, #div3').hide();
               }
        };
        };
        client.send();
    });
});

确保在这里获得自己的API密钥:https://developers.google.com/maps/documentation/geocoding/intro api_key