地理位置示例代码查找我附近的特定商店 HTML 5

Question

知道使用 Geolocation API 查找我所在位置附近的商店吗？一个示例代码应该没问题，然后我会从那里继续。

Answer 1

您可以通过地理定位 API 获得您当前的位置。

然后你将经度和纬度连同搜索查询一起提供给谷歌地图，谷歌地图会返回给你地图，以及你必须放置标记位置的位置：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Reports</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="google" value="notranslate" />
        <meta name="application-name" content="GeoLocator" />
        <meta name="description" content="HTML5&#39;s approach to email" />
        <meta name="application-url" content="https://developer.mozilla.org" />
        <meta name="google" content="notranslate" />
        <!--
        <link rel="canonical" href="https://mail.google.com/mail/" />
        <link rel="shortcut icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon2.ico" type="image/x-icon" />
        <link rel="alternate" type="application/atom+xml" title="Gmail Atom Feed" href="feed/atom" />
            -->
        <script type="text/javascript">
            // <![CDATA[
            var options = {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            };


            var x = null;

            function success(position) {
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                var accuracyInMeters = position.coords.accuracy;


                x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
            }


            function error(err)
            {
                console.warn('ERROR(' + err.code + '): ' + err.message);
                x.innerHTML = '<span style="color: red;">No fix on location</span>';
            }

            function getLocation() {
                if (navigator.geolocation) {
                    // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition
                    // First of all, realise that the default timeout for getCurrentPosition is infinite(!). 
                    // That means that your error handler will never be called if getCurrentPosition hangs somewhere on the back end.

                    navigator.geolocation.getCurrentPosition(success, error, options); // Error and optios can be omitted
                } else {
                    alert("not supported")
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }

            }





            document.addEventListener('DOMContentLoaded', function ()
            {
                x = document.getElementById("demo");
                /*fun code to run*/
                getLocation();
            })




            // ]]>
        </script>


        <style type="text/css" media="all">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

        </style>


    </head>
    <body>
        <div id="demo"></div>

    </body>
</html>

如果浏览器不支持地理位置，那么您也可以
- 使用 IP 解析城镇的地理坐标，并使用其经度/纬度
- 或者您可以要求用户输入他的地址，并从那里获取经度/纬度：

function searchLocations() {
  var address = document.getElementById("addressInput").value;
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      searchLocationsNear(results[0].geometry.location);
    } else {
      alert(address + ' not found');
    }
  });
}

除了从 google 获取最近的商店外，您还可以将商店的位置放入数据库表中并在那里查找它们的坐标。
请参阅此处的示例： https://developers.google.com/maps/articles/phpsqlsearch_v3

要获取某个位置附近的商店列表，您可以使用 Google 地方信息 API
https://developers.google.com/places/documentation/?csw=1
或者您可以在此处使用 StoreLocater 库：
http://storelocator.googlecode.com/git/index.html