在Google地图v3上可点击的行车路线

问题描述

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

我制作了另一个项目，您可以点击绘制该路线，但它没有标记，并且不可拖曳，

代码段：

  var map，ren，ser; var data = {}; var data2 = {}; var marker; var infowindow; var doMark = true; var directionsDisplay; var wayA; var wayB; //Funicãode Iniciofunction 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 asdefiniçesdo mapa，como tipo devisualizaçã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 ='指针'; control.innerHTML ='< img src =http://i47.tinypic.com/2dlp2fc.jpgborder =0alt =由TinyPic托管的图片和视频>'; control.index = 1; map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（对照）; 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 ounãoren = new google.maps.DirectionsRenderer（{ DragArea：true}）; ren.setMap（map）; ren.setPanel（document.getElementById（directionsPanel））; ser = new google.maps.DirectionsService（）; // Cria a rota，DirectionTravelMode pode ser： （{'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 =mappystyle =float：left; width：70％; height：100％> < / div>< div id =directionsPanelstyle =float：right; width：30％; height 100％>< / div>< div> < label> Endereco< / label>< / div>

I'm making a google maps project and need to create a route clicking on it.

My project has 2 points that has a predefined lat and lng, and I want to draw by myself the start and the end of the point A and B and don't lose it functionality.

I made another project that you can click to draw the route but it don't have markers, and is not draggabble, this is my actual project with the full codeI will post here a short code only with my directions.

I want that my first click to the point A and the second my point B, and them the possibility to drag them, like the project linked

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);
    })

}

I'm updating here my code, I done only wayA, that is the first waypoint, the second is a latLng predefined, where you click, it gets the latLng and put inside the '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

解决方案

Concept:(sounds like this is what you want)

1. add a click event listener to the map
2. when the user clicks the map add a draggable marker (I would add a click listener to it so they can delete it by clicking on it)
3. when the user clicks on the map a second time add a second draggable marker
4. when the second marker is added, call the directions service with the position of the two markers.
5. if either marker is dragged call the directions service again.

(if this what you are trying and are running into problems, code or a live link would be helpful)

You are missing #3 and #4

Working example

code snippet:

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>

这篇关于在Google地图v3上可点击的行车路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！