0

我在下面有以下代码，我以互联网为例。所以我需要做的是使用地理位置显示本地汽车经销商。long 和 lat 存储在 phpmyadmin 数据库中。我需要使用 JSON 来完成。结果是使用当前位置，然后显示该区域的本地汽车经销商，连接到存储经纬度的数据库。因此，它将显示一个带有当前位置的标记和几个其他显示其他汽车经销商的标记。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <title>Target Store Locator</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="https://raw.github.com/apigee/usergrid-javascript-sdk/0.9.10/usergrid.SDK.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
    </head>

    <body>
        <!-- This is the main page for the app -->
        <div data-role="page" id="results">
            <div data-theme="c" data-role="header">
                <h3>
                    Results
                </h3>
            </div>
            <img id="map" src="https://maps.googleapis.com/maps/api/staticmap?scale=2&center=Palo Alto, CA&amp;zoom=14&amp;size=400x200&amp;markers=Palo Alto, CA&amp;sensor=false" height="200" style="display: block; margin-left: auto; margin-right: auto">
            <div data-role="content">
                <ul id="list" data-role="listview" data-divider-theme="c" data-inset="false" data-count-theme="b">
                    <li data-role="list-divider" role="heading">Nearest Stores</li>
                </ul>
            </div>
        </div>
        <script>
            //Initialize the Usergrid SDK
            Usergrid.ApiClient.init('usergrid', 'tests');

            $(function(){
                if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
                    // Wait for the device to be ready to grab the geoloc
                    // Helps avoid the unsightly iOS authorization message
                    // http://stackoverflow.com/questions/1673579/location-permission-alert-on-iphone-with-phonegap 
                    document.addEventListener("deviceready", onDeviceReady, false);
                } else {
                    onDeviceReady(); //this is the browser
                }
            })

            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onGetLocationSuccess, onGetLocationError);     
            }

            // This updates the map, listing and store page
            // for every result
            function renderStore(store, label) {
                var coords = store.get('location').latitude+","+store.get('location').longitude;

                // Update the map
                var src =  $("#map").attr('src') + "&markers=color:blue%7Clabel:"+label+"%7C"+coords;

                // Add a list divider for the Pharmacy and SuperTarget results
                $("#map").attr('src', src);
                switch(label) {
                    case 'S':
                    $("#list").append('<li data-role="list-divider" role="heading">Nearest SuperTarget</li>');
                    break;
                    case 'P':
                    $("#list").append('<li data-role="list-divider" role="heading">Nearest Pharmacy</li>');
                    break;
                }
                // Append to the list of results
                $("#list").append('<li><a href="#page'+store.get('storeNumber')+'" data-role="button" data-transition="slide">'+store.get('name')+'</a><span class="ui-li-count ui-btn-corner-all">'+label+'</span></li>');

                // Necessary for the listview to render correctly
                $("#list").listview('refresh');

                $('body').append('<div data-role="page" id="page'+store.get('storeNumber')+'"><div data-theme="b" data-role="header" data-position="fixed"><h3>'+store.get('name')+'</h3><a data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="left"class="ui-btn-left">Results</a></div><img id="map" src="https://maps.googleapis.com/maps/api/staticmap?scale=2&center='+coords+'+&zoom=14&size='+window.innerWidth+'x200&markers='+coords+'&sensor=false" height="200"><div data-role="content"><div><p><b>Address</b><br/>'+store.get('location').displayAddress+'</p><p><b>Opening Hours</b><br/>'+store.get('hours').join('<br/>')+'</p></div></div></div>');
            }

            // Most of the magic happens here
            function onGetLocationSuccess(location) {
                // Extract the coordinates in a usable form
                var latlon = location.coords.latitude+","+location.coords.longitude;

                // Prepare the Google Maps marker and update the map
                var home = "color:orange%7C"+latlon;
                $("#map").attr('src', "https://maps.googleapis.com/maps/api/staticmap?scale=2&center="+latlon+"&zoom=10&size="+window.innerWidth+"x200&sensor=false&markers="+home);

                // Initialize a local “stores” object using the SDK
                var stores = new Usergrid.Collection('stores');

                // This query will return all stores within 15,000 meters of the current location
                stores.setQueryParams({"ql":"select * where location within 15000 of "+latlon});

                // Do the actual query and process the results
                stores.fetch( function(response) {

                        // Process the regular store
                        var count = 1;
                        while(stores.hasNextEntity()) {
                            renderStore(stores.getNextEntity(), count);
                            count++;
                        }

                        // Now let’s search for the nearest store with a Pharmacy
                        stores.setQueryParams({"ql":"location within 100000 of "+latlon+" and pharmacy = true", "limit":1});
                        stores.fetch( function(response) {
                            renderStore(stores.getNextEntity(), 'P');

                            // … And the nearest SuperTarget
                            stores.setQueryParams({"ql":"location within 100000 of "+latlon+" and supertarget = true", "limit":1});
                            stores.fetch( function(response) {
                                renderStore(stores.getNextEntity(), 'S')
                                });
                            });
                        });
            }

            function onGetLocationError() {
                alert("could not get your location");
            }

        </script>
    </body>
</html>
4

1 回答 1

0

使用PDO获取您的数据， PDO::FETCH_OBJ然后使用json_encode生成 JSON

// Prepare statement
$stmt = $dbh->prepare("SELECT  colums FROM table ");
//Execute query
$stmt->setFetchMode(PDO::FETCH_OBJ);
$stmt->execute();
//Show the results  
while($obj = $stmt->fetch()) {  
    $arr[] = $obj;
}
echo '{"marker":'.json_encode($arr).'}';
于 2013-04-15T18:20:38.053 回答