Question

我希望我的网站告诉浏览器询问用户“分享您的位置”

一旦共享了位置，我想如果输出是基于不同的位置，

所以位置A（英国）会输出div1，div2，div3

位置B（非洲）将输出div4 div5 div6

等

这不是基于实际的房屋位置，而是基于地区。这是可能的，如果是这样的话？

Answer 1

这应该可以解决问题：

的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

找到GEO用户的位置，然后输出php

1 个答案: