1

私はグーグルマッププロジェクトを作成していて、それをクリックするルートを作成する必要があります。

私のプロジェクトには、事前定義されたlatとlngを持つ2つのポイントがあり、ポイントAとBの開始と終了を自分で描画し、機能を失わないようにします。

クリックしてルートを描くことができる別のプロジェクトを作成しましたが、マーカーがなく、ドラッグガブルではありません。これは完全なコードを含む実際のプロジェクトであり、ここに私の指示のみを含む短いコードを投稿します。

最初にポイントAにクリックし、2番目にポイント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のみを実行しました。これは最初のウェイポイントです。2番目は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);    
    })

これは完全なコードでの私のテストです

4

1 に答える 1

6

コンセプト:(このような音があなたが望むものです）

  1. クリックイベントリスナーをマップに追加します
  2. ユーザーがマップをクリックしたら、ドラッグ可能なマーカーを追加します（クリックリスナーを追加して、クリックして削除できるようにします）
  3. ユーザーが地図を2回クリックしたときに、2番目のドラッグ可能なマーカーを追加します
  4. 2番目のマーカーが追加されたら、2つのマーカーの位置を指定してルートサービスを呼び出します。
  5. いずれかのマーカーがドラッグされた場合は、再度ルートサービスに連絡してください。

（これがあなたが試みていて問題にぶつかっているなら、コードまたはライブリンクが役に立ちます）

＃3と＃4がありません

実例

コードスニペット：

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="https://web.archive.org/web/20151226013612if_/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="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

于 2012-07-31T19:02:32.540 に答える