jQuery Mobile - Google 탐색 - 길 찾기 서비스 - 현재 위치 확인

사람들이 Android 기기에서 사용하는 JQuery Mobile 웹 사이트가 있습니다.
(이 웹 사이트는 주로 고객 정보를 다루고 있습니다.)
나는 "방향을 잡아라"기능을 통합하려고했습니다.
JQM을 통해 현재 위치와 고객의 주소로 Google 내비게이션 앱을 열 수 있는지 궁금합니다 (GPS, 음성 내비게이션으로 사용할 수 있기 때문에).
그렇지 않다면 누구든지 제안 사항이 있습니까?jQuery Mobile - Google 탐색 - 길 찾기 서비스 - 현재 위치 확인

출처

2012-08-24 Alex

공식 W3C 사이트는 W3C Geolocation working group과 설정 한 마일스톤에 대해 알려줍니다.

Geolocation API에 대한 W3C 초안 제안 (2012 년 5 월)이 새로 생겼습니다.

아래에서 내가 만든 샘플 작동 예제를 찾을 수 있습니다. 코드는 현재 위치를 찾고 방향 서비스를 제공합니다. 대상 목적지와 "길 찾기"버튼을 쓸 수있는 텍스트 상자가 있습니다. 버튼을 클릭하면 페이지 끝에있는 목록이 길 찾기로 채워집니다.

필요에 맞게 수정할 수 있습니다. 또한 Google Map JavaScript API Directions Service에서 길 찾기 서비스에 대해 자세히 알아볼 수 있습니다.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>jQuery mobile with Google maps</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
     <script type="text/javascript"> 

      var map; 
      var currentPosition; 
      var directionsDisplay = new google.maps.DirectionsRenderer();   
      var directionsService = new google.maps.DirectionsService(); 

      function initialize(lat, lon) 
      { 
       currentPosition = new google.maps.LatLng(lat, lon); 

       map = new google.maps.Map(document.getElementById('map_canvas'), { 
        zoom: 15, 
        center: currentPosition, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       directionsDisplay.setMap(map); 
       //directionsDisplay.setPanel($("#instructions-content")); 

       var currentPositionMarker = new google.maps.Marker({ 
        position: currentPosition, 
        map: map, 
        title: "Current position" 
       }); 

       var infowindow = new google.maps.InfoWindow(); 
       google.maps.event.addListener(currentPositionMarker, 'click', function() { 
        infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon); 
        infowindow.open(map, currentPositionMarker); 
       }); 
      } 

      function locError(error) 
      { 
       alert("The position or the map could not be loaded."); 
      } 

      function locSuccess(position) 
      { 
       initialize(position.coords.latitude, position.coords.longitude); 
      } 

      $(document).ready(function() 
      { 
       navigator.geolocation.getCurrentPosition(locSuccess, locError); 

       $("#directions-button").click(function(){ 
        var targetDestination = $("#target-dest").val(); 

        if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') 
        { 
         var request = { 
          origin:currentPosition, 
          destination:targetDestination, 
          travelMode: google.maps.DirectionsTravelMode["DRIVING"] 
         }; 

         directionsService.route(request, function(response, status) { 
          if (status == google.maps.DirectionsStatus.OK) { 
           directionsDisplay.setPanel(document.getElementById("instructions-content")); 
           directionsDisplay.setDirections(response); 

           // For debuging reasons uncomment 
           /* 
           var myRoute = response.routes[0].legs[0]; 
           for (var i = 0; i < myRoute.steps.length; i++) { 
            alert(myRoute.steps[i].instructions); 
           }*/ 
          } 
         }); 
        } 
        else 
        { 
         alert("The target destination is empty or the current position could not be located."); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="name">Target Destination:</label> 
        <input type="text" name="target-dest" id="target-dest" value="" /> 
       </div> 
       <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a> 
       <div data-role="collapsible" id="instructions-container"> 
        <h3>Instructions</h3> 
        <p><div id="instructions-content"></div></p> 
       </div> 
      </div> 
     </div>  
    </body> 
</html>

는 파일 map.html에 HTML 코드를 넣고 모질라 파이어 폭스 (경우에 당신은 서버에 넣어 테스트하고 싶지 않아요)와 직접 엽니 다. 그렇지 않으면 파일을 서버에 놓고 원하는 브라우저로여십시오.

처음에는 현재 위치를 공유할지 여부를 묻는 메시지가 표시됩니다. 공유 버튼을 누르면 현재 위치를 나타내는 마커가있는지도가 표시됩니다. 마커를 클릭하면 위도와 경도가 표시됩니다.

enter image description here

나는이 도움이되기를 바랍니다.

출처

2012-08-25 15:55:39

나는이 방법에 익숙했습니다. 선택의 여지가 없다면 이것을 사용할 것입니다. 하지만 웹 사이트에서 Google 내비게이션 앱 (Android 휴대 전화에 이미 설치됨)을 시작하는 데 더 관심이있었습니다. 가능하다면 어떤 단서가 있습니까? – Alex

길 찾기를 할 수 있습니까? * 위치를 입력하고 버튼을 누르지 않고 * *? – Rubytastic

jQuery Mobile - Google 탐색 - 길 찾기 서비스 - 현재 위치 확인

답변

관련 문제