我想在地图上添加更多的车站（站点）

Question

这是我项目的输出链接

我的代码

var map;
var directionsService;
var directionsRenderer;

function initialize() {
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(-33.868011, 151207566)
  });

  directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directions'));

  directionsService = new google.maps.DirectionsService();

  Form = document.forms['harita'];
  yol(Form.elements['nerden'].value, Form.elements['nereye'].value);
}

function yol(nereden, nereye) {
  var request = {
    origin: nereden,
    destination: nereye,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.DirectionsUnitSystem.METRIC
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(response);
    } else {
      alert('Yol Tarifi Oluşturulamadı');
    }
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div style="margin-top:100px;margin-left:300px;">
  <form name="harita" action="#" style="top:50%" align="center">
    <table>
      <tr>
        <th align="right"> &nbsp; &nbsp;Nerden: &nbsp; &nbsp;</th>
        <td><input class="form-control type=" text " size="25 " name="nerden " placeholder="Nerden... " onfocus="this.value='' " value="İşgem elazığ " /></td> &nbsp;
                        <th align="right "> &nbsp; &nbsp;Nereye: &nbsp; &nbsp;</th>
                        <td align="right "><input class="form-control type="text" size="25" placeholder="Nereye..." onfocus="this.value = ''" name="nereye" value="Elazığ" /></td>
      </tr>
      <tr>
        <th align="right"> &nbsp; &nbsp;Nerden: &nbsp; &nbsp;</th>
        <td><input class="form-control type=" text " size="25 " placeholder="Kordinatlar(x) " name="kordix " onfocus="this.value='' " value="Kordinatlar(x) " /></td>
    					<th align="right "> &nbsp; &nbsp;Nereye: &nbsp; &nbsp;</th>
    					<td><input class="form-control type="text" size="25" name="kordiy" onfocus="this.value = ''" placeholder="Kordinatlar(y)" value="Kordinatlar(y)" /></td>
        &nbsp; &nbsp;&nbsp; &nbsp;
        <th>
          <input class="btn btn-outline-success my-2 my-sm-0" name="submit" type="button" style="margin-left:20px" value="Yol Haritasını Göster" onclick="yol(document.forms['harita'].elements['nerden'].value, document.forms['harita'].elements['nereye'].value)"
          />
        </th>
      </tr>
    </table>
  </form>
  <div id="map_canvas" style="float:left; margin-right:10px;width:400px;height:400px;background:yellow"></div>
  <div id="directions" style="float:left;width:400px;height:400px;background:yellow;overflow-y:scroll;"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEDfNcQRmKQEyulDN8nGWjLYPm8s4YB58&callback=initialize"></script>

Answer 1

我假设您想沿着路线添加航路点。

This document说明了如何添加航点。

例如，如果您希望沿埃斯基谢希尔和布尔萨停靠，您可以这样操作：

  var request = {
    origin: nereden,
    destination: nereye,
    waypoints: [{location: "Eskisehir"}, {location: "Bursa"}],
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.DirectionsUnitSystem.METRIC
  };