使用地理位置查找商店

我有下面的代碼，我拿起互聯網作爲例子。所以我需要做的是顯示當地的汽車經銷商使用地理定位。 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>

來源

2013-04-15 user2279531

你的問題是獲取你的數據？ –

@davidstrachan，獲取存儲在phpmyadmindatabase中的本地汽車經銷商的多種經緯度，並使用JSON將其顯示在地圖上。 – user2279531

使用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-15 18:20:38

使用地理位置查找商店

回答

相關問題