Google Geolocation и Direction API

Question

Как объединить Google Geolocation и Direction API, чтобы при нажатии на маркер геолокации и любой из маркеров (координаты которых я жестко закодировал) будет отображаться направление между ними обоими.

Геолокационный код

<script type="text/javascript">
  function initialize() {
    var locations = [
     ['Hougang', 1.37265, 103.893658],
     ['Punggol', 1.400617, 103.907833],
     ['MacRitchie Reservoir', 1.346002, 103.825436],
     ['Bishan', 1.352051, 103.849125],
     ['Sentosa', 1.251226, 103.830757]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(1.37265, 103.893658),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    // Check if user support geo-location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
          zoom: 8,
          center: geolocpoint,
          mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        var geolocation = new google.maps.Marker({
          position: geolocpoint,
          map: map,
          title: 'Your geolocation',
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

• Добавьте слушателя щелчка к маркерам.
• Когда он выполняется, нажмите на позицию текущего маркера в массиве.
• Если длина массива равна двум, вызовите службу указателей с этими двумя точками в качестве начальной и конечной точек.

Аналогично этому примеру, но вместо прослушивателя щелчков "карта" используйте прослушиватели щелчков "маркер".

Вы сказали, что хотите, чтобы первый щелчок был на маркере геолокации, вам нужно написать код, чтобы проверить местоположение маркера и убедиться, что это маркер геолокации, если вы хотите это сделать. Я думаю, что было бы проще, если бы пользователь просто щелкнул мышью по одному из маркеров назначения, а затем сгенерировал указания из маркера геолокации (на который вам нужно было бы сохранить особую ссылку).

Пример, который предполагает начало - это точка геолокации

фрагмент кода из примера:

var geolocation = null;
  var ren = null;

  function initialize() {

    var locations = [
      ['Hougang', 1.37265, 103.893658],
      ['Punggol', 1.400617, 103.907833],
      ['MacRitchie Reservoir', 1.346002, 103.825436],
      ['Bishan', 1.352051, 103.849125],
      ['Sentosa', 1.251226, 103.830757]
    ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 13,
      center: new google.maps.LatLng(1.37265, 103.893658),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    // Place a marker
    geolocation = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      title: 'Your geolocation',
      icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
    });


    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          if (ren && ren.getMap()) ren.setMap(null);
          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': geolocation.getPosition(),
            'destination': marker.getPosition(),
            'travelMode': google.maps.DirectionsTravelMode.DRIVING
          }, function(res, sts) {
            if (sts == 'OK') ren.setDirections(res);
          })
        }
      })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 8,
            center: geolocpoint,
            mapTypeId: google.maps.MapTypeId.HYBRID
          }
          // Place a marker
        geolocation = new google.maps.Marker({
          position: geolocpoint,
          map: map,
          title: 'Your geolocation',
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
      });
    } else {
      // Place a marker
      geolocation = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: 'Your geolocation',
        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>