Есть ли способ прослушивания функции щелчка с маркерами wapoint, созданными службой направления

Question

По сути, я пытаюсь добиться этого. 1 - Получить широту / долготу от MySQL, используя AJAX. 2 - Нарисовать маршрут на карте, используя службу направления и технику путевых точек. 3 - Когда пользователь нажимает на маркер карты, каждый маркер имеет активируемую функцию, когда маркер щелкается, детали местоположения будут выбираться в div под картой, в основном мне нужно обрабатывать прослушиватель щелчков на каждом щелчке маркера, чтобы я мог выполнить желаемое действия на эти клики.

Чего я достиг, так это:

1 - Возможность получить широту / долготу с помощью ajax-запроса при загрузке страницы из MySQL с использованием PHP REST API.

2 - Передайте эти маркеры на карту и нарисуйте маршрут, используя направление Сервис. Снимок экрана для ссылки на идею https://imgur.com/a/ApkPjTN

var i = 0;
var ACoptions = {
  componentRestrictions: {
    country: "PK"
  }
};
var map;

var directionsDisplay;        
var directionsService;

function initialize(directionsService, directionsDisplay , waypointElmts , origin1 , designation1) {
 directionsDisplay = new google.maps.DirectionsRenderer({
 polylineOptions:{
    strokeColor:"#00a54f",
    strokeOpacity: 1,
    strokeWeight:5

}

});           
 directionsService = new google.maps.DirectionsService();
    document.getElementById( 'map' ).style.display = "block";

  var melbourne = new google.maps.LatLng(30.3753,69.3451);
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne,

  }

  map = new google.maps.Map(document.getElementById("map"), myOptions);

  directionsDisplay.setMap(map);

 calculateAndDisplayRoute(directionsService, directionsDisplay , waypointElmts , origin1 , designation1);

}

function calculateAndDisplayRoute(directionsService, directionsDisplay , waypointElmts , origin1 , designation1) {

  var waypts = [];

  for (var i = 0; i < waypointElmts.length; i++) {

      waypts.push({
        location: waypointElmts[i],
        stopover: true,
      });
  }

  directionsService.route({
    origin: origin1,
    destination: designation1,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    renderDirectionsPolylines(response);
    }
    else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) { 
        wait = true;
        setTimeout("wait = true", 2000);
        //alert("OQL: " + status);x
        }  else {

      toastr.error('Directions request failed due to '+status,'Error!',
    {positionClass: 'toast-top-full-width', containerId: 'toast-top-full-width'});
    }
  });
}

 $.ajax({
        type: "POST",
        url: "ajax-requests/ajaxm.php",
        dataType: "json",
data: { what_need : 'detail_routesheet'
,_token: '<?php echo $_SESSION['_token'];?>',
route_id: <?php echo $_GET['routeid']?>
},
        success: function(response){
      var len = response.length;
            for(var i=0; i<len; i++){
                var start_location = response[i].start_location;
                var end_location = response[i].end_location;
                var waypoints = response[i].waypoints;
                var datetime = response[i].datetime;
            }

var array = $.map(waypoints, function(value, index) {
    return [value];
});
function firstAndLast(array) {

var firstItem = array[0];
var lastItem = array[array.length-1];

 var objOutput = {
   start : firstItem,
   end : lastItem
  };

return objOutput;
}

var display = firstAndLast(array);
var start_locationlatlng = display.start;
var end_locationlatlng = display.end;

//calculateAndDisplayRoute(directionsService, directionsDisplay ,waypoints , originmap , designationmap);

array.shift();
array.pop();  

initialize(directionsService, directionsDisplay , array , start_locationlatlng , end_locationlatlng)
       }
    });

1 - Когда пользователь щелкает, я могу обработать событие щелчка для каждого маркера, созданного путевой точкой сервиса направления

Answer 1

DirectionsRenderer имеет suppressMarkers свойство. Используйте его для удаления маркеров, автоматически добавляемых службой маршрутов.

Затем создайте свои собственные маркеры для любой точки (точек), которые вам нужны (начальная и / или конечная и / или путевые точки).

Ниже приведен рабочий фрагмент, который создает кликабельные маркеры с информационным окном для каждой точки.

var map, infowindow, directionDisplay, directionsService;

function initialize() {

  directionsService = new google.maps.DirectionsService();
  infowindow = new google.maps.InfoWindow();

  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });

  var myOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {

  var waypts = [];

  stop = new google.maps.LatLng(51.943571, 6.463856)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945032, 6.465776)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945538, 6.469413)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.947462, 6.467941)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945409, 6.465562)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.943700, 6.462096)
  waypts.push({
    location: stop,
    stopover: true
  });

  var start = new google.maps.LatLng(51.943382, 6.463116);
  var end = new google.maps.LatLng(51.946199, 6.461947);

  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      // Create custom markers for start / end locations
      createMarker(start);
      createMarker(end);

      // Create custom markers for each waypoint
      for (var i = 0; i < waypts.length; i++) {

        createMarker(waypts[i].location);
      }

      directionsDisplay.setDirections(response);
    }
  });
}

function createMarker(latlng) {

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent('Clicked marker at ' + this.position.toString());
    infowindow.open(map, this);
  });
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>