Question

Javascript（参见MarkerWithLabel docs）

var marker1 = new MarkerWithLabel({
           position: homeLatLng,
           draggable: true,
           raiseOnDrag: true,
           map: map,
           labelContent: "$425K",
           labelAnchor: new google.maps.Point(22, 0),
           labelClass: "marker", // the CSS class for the label
           labelStyle: {opacity: 0.75}
         });

CSS：

.marker {
    color: #fff;
    font-size: 16px;
    line-height: 23px;
    min-width: 36px;
    text-align: center;
    white-space: nowrap;
}

请参见屏幕截图 - https://imgur.com/5a3Gu5S 标签总是在标记前面。

JSFIDDLE

有可能解决它吗？谢谢。

Answer 1

在MarkerWithLabel.js：

找到这个：

this.getPanes().overlayImage.appendChild(this.labelDiv_);
  this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_);
  // One cross is shared with all markers, so only add it once:
  if (typeof MarkerLabel_.getSharedCross.processed === "undefined") {
    this.getPanes().overlayImage.appendChild(this.crossDiv_);
    MarkerLabel_.getSharedCross.processed = true;
  }

更改为：

this.getPanes().markerLayer.appendChild(this.labelDiv_);
  this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_);
  // One cross is shared with all markers, so only add it once:
  if (typeof MarkerLabel_.getSharedCross.processed === "undefined") {
    this.getPanes().markerLayer.appendChild(this.crossDiv_);
    MarkerLabel_.getSharedCross.processed = true;
  }

Answer 2

有趣。我以为它之前可能是一个js问题。无论如何，使用样式，你可以简化：

.marker {
    color: #fff; 
    text-shadow: 1px 1px 1px #000;
    font-size: 16px;
    white-space: nowrap; /* not even sure you need; depends on content... */
}

标签显示在标记上方 - MarkerWithLabel

2 个答案: