Ярлык для каждой контактной точки в API карт Google

Question

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

Answer 1

Если вы хотите получить доступ к маркерам из запроса DirectionsRenderer, который требует взлома, потому что нет официального способа сделать это с помощью google map api.

Существует обходной путь, вот пример, который я сделал: https://jsfiddle.net/TomKarachristos/cna78jbw/

google.maps.event.addListener(directionsDisplay, 'directions_changed', 
    function() { 
     var self = this; 
     markersArray = []; //empty the array 
     setTimeout(function() { //wait until markers render 
      for (var k in self) { //search everything in directionsDisplay 
      if (typeof self[k].markers != 'undefined') { // its that the markers? 
       var markers = self[k].markers; 
       for (var i = 0; i < markers.length; ++i) { 
       markersArray.push(markers[i]); 
       markersArray[i].setLabel({ //lets change the label! 
        color: "white", 
        fontSize: "16px", 
        text: i.toString() 
       }); 
       } 
      } 
      } 
      console.log(markersArray); // now markersArray have all the markers 
     }, 0); 
     }); 

Но это не является хорошим решением, если вы хотите иметь полный контроль над маркерами. Если подавить маркера у вас есть много возможностей, вы можете использовать маркера из библиотек, как markerLabel или RichMarker (используйте Dóm элемент для маркеров!)

Вот пример с markerLabel, щелкните в любом месте карты и маркера появляется с метку с расстоянием от центрального маркера. https://jsfiddle.net/TomKarachristos/x1zg503m/

[...] 
markerArray[1] = new MarkerWithLabel({ 
    position: location, 
    map: map, 
    animation: google.maps.Animation.DROP, //just for fun 
    labelContent: "", 
    labelClass: "marker-label" 
    }); 
[...] 
if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     route = directionsDisplay.getDirections().routes[0]; 
     markerArray[1].set('labelContent', route.legs[0].distance.value/1000) 
[...] 

более легко сделать, более приятно видеть, больше удовольствия!