Google지도 direction line

나는이 코드를 사용하여 사용자가 두 도시를 입력하고 주어진 입력 위치를 보여줍니다. 그러나 내가 원하는 것은 제 1 도시에서 다른 도시로의 방향을 잘 보여주는 것입니다. 그렇게하는 방법?Google지도 direction line

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQ8OCC8En5vNHod25Ov3Qs5E1v7NPRSsg&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
     var geocoder; 
     var map; 
     function initialize1() { 

     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 100.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 

     function initialize() { 
      // add mapOptions here to the values in the input boxes. 
      var mapOptions = { 
       center: new google.maps.LatLng(-34.397, 100.644), 
       zoom: 12, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
      geocoder = new google.maps.Geocoder(); 
      addAddress(document.getElementById('from').value); 
      addAddress(document.getElementById('to').value); 
     } 

     function addAddress(place) { 
      var address = place; 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       } else { 
        alert('Geocode was not successful for the following reason: ' + status); 
       } 
      }); 
     } 
    </script> 
    </head> 
    <body> 

    From: <input id="from" type="text" name="From"><br> 
    To: <input id="to" type="text" name="To"><br> 

    <button type="button" onclick="initialize()">View example (map-simple.html)</button> 

    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

감사

제이슨

출처

2012-10-17 user1120260

DirectionsService in the Google Maps API v3을 사용하십시오.

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple

및 텍스트 방향 : 다음은 문서의 예입니다

https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

출처

2012-10-17 13:22:05 geocodezip

는 "위치"당신이 방향을 얻기 위해 다음과 같은 방향 렌더러를 사용할 수있는 주소를 의미합니다 의미하는 경우 :

여기 내 연습 코드입니다. 그런 다음 아래 코드를

 $("#find").click(function() { 
      starting = $("#from").val(); 
      finishing = $("#destination").val(); 
      $("#map").gmap3(
      { 
       action: 'getRoute', 
       options: { 
        origin: starting, 
        destination: finishing, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }, 
       callback: function (results) { 
        if (!results) { 
         alert("returning") 
         return 
        }; 
        $(this).gmap3(
        { 
         action: 'addDirectionsRenderer', 
         options: { 
          preserveViewport: true, 
          draggable: false, 
          directions: results 

         } 
        } 
        ); 
       } 
      }) 
     })

출처

2012-10-17 07:30:37 Raghurocks

는 작동하지 않습니다 .... – user1120260

는 작동하지 않습니다 ....있어이 오류가 .. . $ ("# map") .gmap3 (함수가 아닙니다 .. "#map_canvas"로 변경하려고했지만 ... 여전히 같은 오류가 있습니다 ... 감사합니다. – user1120260

이 작업을 수행했습니다. 실제로 하나의 마커를 사용하여 보낸 사람 주소를 찾고 주소 지정하고 사용하는 것처럼이 모듈을 내 필요에 따라 구현했습니다. 방향을 얻으려면 ....... : D – Raghurocks

설명에 따라 ID의 #from과 #destination로와 주소에서를 표시하려면 모든 첫 번째는 두 개의 텍스트 상자에 두 개의 마커의 위치 주소를 저장 : 처음에 다른 위치와 다른 데이터의 두 마커를 만든 다음 마커를 드래그하면 주소를 나타내는 정보 창이 표시되고 두 개의 버튼이 시작되고 끝납니다. 나는 당신이이 부분까지 다했다고 생각합니다. 그 다음에 시작 버튼이나 클릭 버튼에 따라 채워지는 두 개의 텍스트 상자를 사용했습니다. 사용자가 찾기 버튼을 클릭하면이 텍스트 상자 값이 두 표식 사이의 방향을 찾는 데 사용됩니다. 참고 : "여기서 유지할 수있는 차이점은 클릭 한 단추를 변경하는 것입니다 ..... " "직접 텍스트 상자에 주소를 입력하고 그 사이의 방향을 찾을 수도 있습니다. " 전체 조작을 위해 여기 gmap3을 사용하면 아래 코드가 도움이 될 수 있습니다.

여기

<script type="text/javascript"> 
    window.onload = clear; 
    function clear() { 
     $("#from").val(null) 
     $("#destination").val(null) 
    } 

    $(document).ready(function() { 
     var starting = ""; 
     var finishing = ""; 
     $("#find").click(function() { 
      starting = $("#from").val(); 
      finishing = $("#destination").val(); 
      $("#map").gmap3(
      { 
       action: 'getRoute', 
       options: { 
        origin: starting, 
        destination: finishing, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }, 
       callback: function (results) { 
        if (!results) { 
         alert("returning") 
         return 
        }; 
        $(this).gmap3(
        { 
         action: 'addDirectionsRenderer', 
         options: { 
          preserveViewport: true, 
          draggable: false, 
          directions: results 

         } 
        } 
        ); 
       } 
      }) 
     }) 
     $("#map").gmap3({ 

      action: 'addMarkers', 
      markers: [ //markers array 
       {lat: 22.74, lng: 83.28, data: 'madhu' }, 
       { lat: 17.74, lng: 82.28, data: 'raghu' } 
      ], 
      map: { // this is for map options not for any markers 
       center: [17.74, 83.28], 
       zoom: 5 
      }, 
      marker: { 
       options: { 
        draggable: true 
       }, 

       events: {// marker events 
        dragend: function (marker, event, data) { 
         var contentString = '<div id="main content">' 
          + '<input type="button" id="start" value="start" />' 
          + '<input type="button" id="finish" value="finish" />' 
          + '</div>'; 
         //get address on click event 
         $(this).gmap3({ 
          action: 'getAddress', 
          latLng: marker.getPosition(), 
          callback: function (results) { 
           var map = $(this).gmap3('get'), 
           infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' }) 
           if (infowindow) { 
            content = results && results[1] ? results && results[1].formatted_address : 'no address'; 
            infowindow.open(map, marker); 
            infowindow.setContent(content + contentString); 
           } 
           else { 
            content = results && results[1] ? results && results[1].formatted_address : 'no address'; 
            $(this).gmap3({ 
             action: 'addinfowindow', 
             anchor: marker, 
             options: { content: content + contentString }, 
             events: { 
              domready: function() { 
               $("#start").click(function() { 
                alert("start clicked " + content); 
                $("#from").val(content); 
                starting = content; 
                check(); 
               }) 
               $("#finish").click(function() { 
                alert("finish clicked " + content); 
                $("#destination").val(content); 
                finishing = content; 
               }) 
              } 
             } 
            }); 
           } 

          } 

         }); 
        }, 
       } 
      }, 
     }); 
    }); 
</script>

위

<div id="headinput"> 
      <input type="text" value="enter from" id="from" /> 
      <input type="text" value="enter destination" id="destination" /> 
      <input type="button" value="find" id="find" /> 
     </div> 
     <br /> 
     <div id ="map"style="width: 100%; top: auto; left: auto; position: relative; height: 600px; float:left" ></div>

,174 대한 HTML 부분

이것은 파이어 폭스 브라우저에서 확인한 것입니다. D

출처

2012-10-17 08:42:38 Raghurocks

위의 개념에서 무엇이든 명확하지 않으면 알려주세요 ....... : D @Jason – Raghurocks

... 오류가 발생했습니다 ... TypeError : $ ("# map"). gmap3이 (가) 함수가 아닙니다. – user1120260

최신 gmap3.js를 포함하지 않았다고 생각합니다. – Raghurocks

Google지도 direction line

답변

관련 문제