在Google Map API上显示每个Waypoint Pin的标签

时间:2013-09-12 17:22:00

标签: javascript google-maps-api-3 label google-maps-markers map-directions

我正在尝试为路线上的每个航路点添加一个标签,但我不确定应该如何处理它。在做了一些研究之后,我知道你可以添加带标签的自定义引脚,但是当我手动丢弃每个引脚时。我怎么能这样做呢?

1 个答案:

答案 0 :(得分:4)

如果您想要从DirectionsRenderer请求访问标记需要黑客,因为没有官方方法从谷歌地图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);
      });

但如果您想要完全控制标记,这不是一个好的解决方案。如果您压制标记,则有很多可能性,您可以使用markerLabelRichMarker等库中的标记(使用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)
[...]

更容易制作,更好看,更有趣! enter image description here