【问题标题】:HTML5 Find nearby geolocationHTML5 查找附近的地理位置
【发布时间】:2023-03-28 16:12:01
【问题描述】:

我正在创建一个应用程序,我需要该应用程序来查找距用户位置最近的汽车租赁,或者如果他们输入邮政编码。目前我已经查看了以前关于堆栈溢出的帖子,并找到了以下找到用户当前位置的帖子。我对此很陌生,所以提前道歉,但我不确定我将如何从这里进行数据显示。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Geolocation</title>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            // Integration with google maps
            function loadMap(lat, lng) {
                var latlng = new google.maps.LatLng(lat, lng);

                var settings = {
                    zoom: 14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById('map_canvas'), settings);

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map, 
                    title: 'Your Position!'
                });  

                document.getElementById('status').innerHTML = 'Position Found!';
            }

            // Initialize geolocation
            function initialize() {             
                if (navigator.geolocation) {
                    document.getElementById('status').innerHTML = 'Checking...';

                    navigator.geolocation.getCurrentPosition(
                        onSuccess, 
                        onError, {
                            enableHighAccuracy: true,
                            timeout: 20000,
                            maximumAge: 120000
                        });
                }
                else {
                    document.getElementById('status').innerHTML = 'Geolocation not supported.';
                }
            }

            // Map position retrieved successfully
            function onSuccess(position) {
                var data = '';

                data += 'latitude: ' + position.coords.latitude + '<br/>';
                data += 'longitude: ' + position.coords.longitude + '<br/>';
                data += 'altitude: ' + position.coords.altitude + '<br/>';
                data += 'accuracy: ' + position.coords.accuracy + '<br/>';
                data += 'altitudeAccuracy: ' + position.coords.altitudeAccuracy + '<br/>';
                data += 'heading: ' + position.coords.heading + '<br/>';
                data += 'speed: ' + position.coords.speed + '<br/>';

                document.getElementById('data').innerHTML = data;

                loadMap(position.coords.latitude, position.coords.longitude);
            }

            // Error handler
            function onError(err) {
                var message;

                switch (err.code) {
                    case 0:
                        message = 'Unknown error: ' + err.message;
                        break;
                    case 1:
                        message = 'You denied permission to retrieve a position.';
                        break;
                    case 2:
                        message = 'The browser was unable to determine a position: ' + error.message;
                        break;
                    case 3:
                        message = 'The browser timed out before retrieving the position.';
                        break;
                }

                document.getElementById('status').innerHTML = message;
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="status"></div>
        <div id="data"></div>
        <div id="map_canvas" style="width: 640px; height: 480px"></div> 
    </body>
</html>

当用户选择当前位置或输入他们的邮政编码时,我如何让应用显示最近的汽车租赁列表?

谢谢。

【问题讨论】:

  • 您从哪里获得租车地点列表?
  • 那是我不明白的。我是新手,做了很多研究,但不知道它是如何工作的。

标签: android html cordova google-maps-api-3 geolocation


【解决方案1】:

如果您要构建汽车租赁位置数据库,MongoDB 具有内置的地理定位/地理空间查询功能。一般来说,听起来您需要购买或租用代理列表,将其转换为数据库格式,然后在您的 html 中使用地理查询查询该数据库。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-06-09
    • 2012-01-04
    • 1970-01-01
    • 1970-01-01
    • 2016-05-08
    • 2011-06-14
    • 1970-01-01
    相关资源
    最近更新 更多