谷歌地图方向线

我有这个代码，允许用户进入两个城市，并显示给定输入的位置。但我想要展示的是从第一个城市到另一个城市的方向。怎么做？谷歌地图方向线

这里是我的做法代码：

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

谷歌地图方向线

回答

相关问题