Google地图v3上的可点击行驶方向

时间:2012-07-31 15:36:35

标签: google-maps-api-3 driving-directions

我正在制作一个谷歌地图项目,需要创建一个点击它的路线。

我的项目有2个点有预定义的lat和lng,我想自己绘制A点和B点的开始和结束,并且不会失去它的功能。

我创建了另一个项目,你可以点击绘制路线,但它没有标记,并且不可拖动,this is my actual project包含完整代码 我将在这里发布一个只有我的指示的简短代码。

我希望我第一次点击A点,第二点点B,他们可以拖动它们,就像项目链接一样

function goma()
{   
    var mapDiv = document.getElementById('mappy');
    var mapOptions = {
    zoom: 12, 
    center: new google.maps.LatLng(-23.563594, -46.654239),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    }
    pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
    map = new google.maps.Map( mapDiv, mapOptions ); 

    //Render route, etc.
    ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    ren.setPanel(document.getElementById("directionsPanel"));
    ser = new google.maps.DirectionsService();

    //Create the route
    ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination':  new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK')ren.setDirections(res);    
    })      

}   

我在这里更新我的代码,我只做了wayA,这是第一个航路点,第二个是预定义的latLng,你点击它,它获取latLng并放入'origin'。

    google.maps.event.addListener(map, "click", function(event) {
            wayA = new google.maps.Marker({ 
              position: event.latLng,
              map: map                
            });
     });
    ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    ren.setPanel(document.getElementById("directionsPanel"));
    ser = new google.maps.DirectionsService();          
    ser.route({ 'origin': wayA, 'destination':  new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK')ren.setDirections(res);    
    })      

This is my test with the full code

1 个答案:

答案 0 :(得分:6)

概念: (听起来这就是你想要的)

  1. 向地图添加点击事件监听器
  2. 当用户点击地图时添加一个可拖动的标记(我会添加一个点击监听器,以便他们可以通过点击删除它)
  3. 当用户第二次点击地图时添加第二个可拖动标记
  4. 添加第二个标记时,使用两个标记的位置调用路线服务。
  5. 如果拖动任一标记,请再次调用路线服务。
  6. (如果您正在尝试并遇到问题,代码或实时链接会有所帮助)

    你缺少#3和#4

    Working example

    代码段

    var map, ren, ser;
    var data = {};
    var data2 = {};
    var marker;
    var infowindow;
    var doMark = true;
    var directionsDisplay;
    
    var wayA;
    var wayB;
    
    //Função de Inicio
    
    function goma() {
    
      var mapDiv = document.getElementById('mappy');
    
      var mapOptions = {
          zoom: 12,
    
          center: new google.maps.LatLng(-23.563594, -46.654239),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        //Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN
      map = new google.maps.Map(mapDiv, mapOptions);
    
    
      var control = document.createElement('DIV');
      control.style.padding = '1px';
      control.style.border = '1px solid #000';
      control.style.backgroundColor = 'white';
      control.style.cursor = 'pointer';
      control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">';
      control.index = 1;
    
    
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
    
      google.maps.event.addDomListener(control, 'click', function() {
        doMark = false;
        markNow();
    
    
      });
    
      google.maps.event.addListener(map, "click", function(event) {
        if (!wayA) {
          wayA = new google.maps.Marker({
    
            position: event.latLng,
            map: map
    
          });
        } else {
          wayB = new google.maps.Marker({
    
            position: event.latLng,
            map: map
    
          });
    
          //Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não
          ren = new google.maps.DirectionsRenderer({
            'draggable': true
          });
          ren.setMap(map);
          ren.setPanel(document.getElementById("directionsPanel"));
          ser = new google.maps.DirectionsService();
    
          //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
          ser.route({
            'origin': wayA.getPosition(),
            'destination': wayB.getPosition(),
            'travelMode': google.maps.DirectionsTravelMode.DRIVING
          }, function(res, sts) {
            if (sts == 'OK') ren.setDirections(res);
          })
    
        }
      });
    }
    
    var html = "<table>" +
      "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
      "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
      "<tr><td>Tipo:</td> <td><select id='type'>" +
      "<option value='oficina' SELECTED>oficina</option>" +
      "<option value='restaurante'>restaurante</option>" +
      "</select> </td></tr>" +
      "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";
    infowindow = new google.maps.InfoWindow({
      content: html
    });
    
    google.maps.event.addDomListener(window, 'load', goma);
    html,
    body {
      height: 100%;
      width: 100%;
    }
    <script src="http://maps.google.com/maps/api/js"></script>
    <div id="mappy" style="float:left;width:70%; height:100%"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
    <div>
      <label>Endereco</label>
    </div>