Geolocation을 사용하여 매장 찾기

나는 아래의 코드를 가지고 인터넷을 예로 들었다. 그래서 내가해야 할 일은 지리적 위치를 사용하여 현지 자동차 딜러를 표시하는 것입니다. long과 lat는 phpmyadmin 데이터베이스에 저장됩니다. JSON을 사용하여이 작업을 수행해야합니다. 결과는 현재 위치를 사용하고 해당 지역을 방문한 지역 자동차 딜러를 표시하여 길고 위도가 저장된 데이터베이스에 연결하는 것입니다. 따라서 현재 위치가있는 마커와 다른 자동차 딜러를 표시하는 다른 마커가 표시됩니다.Geolocation을 사용하여 매장 찾기

<!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

질문은 무엇을 생산하기 위해 json_encode를 사용하여 데이터를 가져 오기 사용하십니까? –

@davidstrachan, phpmyadmindatabase에 저장되어있는 길고 도량의 지역 자동차 딜러를 찾아 JSON을 사용하여지도에 표시하십시오. – user2279531

PDO는 PDO::FETCH_OBJ 그 때는이 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

Geolocation을 사용하여 매장 찾기

답변

관련 문제