google-maps - 透明なテキストラベル付きのグーグルマップマーカー

Question

透明なテキストラベルでGoogleマップにマーカーを配置する方法は？

例：天気オーバーレイを使用したGoogleマップには、背景が透明な気温があります。
マーカーのラベルは動的に変化します。Ex tempが変わると、ラベルも変わります。

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)',
    }
})