在Google地图API中为每个路标图钉显示标签

Question

我想为路线上的每个航点添加一个标签，但我不确定应该如何处理。经过一些研究，我了解到可以添加带有标签的自定义图钉，但那是当我手动放下每个图钉时。我该如何在导航中实现这一点？

- juminoz

---

[多个]方向请求结果上的自定义标记点](http://www.geocodezip.com/v3_directions_multipleWayPts_CustomMrkrsB.html) - geocodezip

我最终选择了抑制标记并手动添加它们，因为没有办法获取由方向服务放置的引脚的引用。 - juminoz

这就是链接示例的工作原理。 - geocodezip

请查看https://dev59.com/SHbZa4cB1Zd3GeqPHJDJ#18667822，了解如何访问由DirectionsRenderer创建的标记。 - Dr.Molle

Answer 1

如果您想从DirectionsRenderer请求访问标记，需要进行一些技巧处理，因为从Google地图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（使用dom元素作为标记！）

这里是一个使用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)
[...]

更易制作，更美观，更有趣！

- Thomas Karachristos