google-maps - 带有透明文本标签的谷歌地图标记

Question

如何使用透明文本标签在谷歌地图上放置标记？

示例：带有天气叠加层的 Google 地图具有透明背景的温度。
标记的标签会动态变化。例如，随着温度的变化，标签也会发生变化。

Answer 1

试试MarkerWithLabel实用程序库。这是一个演示

最低要求是 CSS 样式。

.labels {
  color: red;
  background-color: transparent;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 100px;
  border: 0;
}

​</p>

  var marker1 = new MarkerWithLabel({
    position: new google.maps.LatLng(0,-5),
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "Tina's transparent Marker With Label",
    labelAnchor: new google.maps.Point(50, 0),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {opacity: 0.75}
  });

Answer 2

如果您只需要更改标签不透明度，请不要使用库。

您可以使用：

let marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: {
        text: 'Hello World!',
        color: 'rgba(0, 0, 0, 0.5)',
    }
})