谷歌地圖方向線

我有這個代碼，允許用戶進入兩個城市，並顯示給定輸入的位置。但我想要展示的是從第一個城市到另一個城市的方向。怎麼做？谷歌地圖方向線

這裏是我的做法代碼：

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

，如果你的意思是「位置」意味着你可以使用方向呈現類似下面來獲得方向的地址。所有的首先，如果你想用的ID #from和#destination顯示，並從地址，然後按照下面的代碼

 $("#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

說明存儲兩個標記插入兩個文本框的位置地址：起初，我創建了不同位置和不同數據的兩個標記，然後在任何標記的dragend之後，將會顯示地址和兩個按鈕開始和結束的infowindow。我認爲你已經完成了這部分。因此，在此之後，我使用了兩個文本框，這些文本框將根據單擊的開始按鈕或完成按鈕進行填充。之後，如果用戶點擊查找按鈕，則此文本框的值將用於查找兩個標記之間的方向注意：「在這裏您可以從任何標記中獲得或者只有差別，您必須維護的是更改點擊的按鈕在開始或結束.....」 ‘你甚至可以直接給在文本框中的地址，並找到它們之間的方向’ 這裏我用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>

HTML部分

這是完美的工作之一，我檢查它在Firefox瀏覽器........：D

來源

2012-10-17 08:42:38 Raghurocks

讓我知道，如果你不清楚上述概念的任何內容.......： D @Jason – Raghurocks

得到了一個錯誤... TypeError：$（「＃map」）.gmap3不是函數 – user1120260

我想你沒有包含最新的gmap3.js – Raghurocks

谷歌地圖方向線

回答

相關問題