GoogleMap Javascript のツールチップ

投稿日: 投稿者:

Leaflet Javascriptのツールチップがいい感じに出来たので、グレートサークルラインがかんたんなので、GoogleMapを使ってるアプリで同じようなこと出来ないか調べてみたところ、
Google語では、Labelのようで、調べて実装してみました。

ここで教えて頂きました。

公式ドキュメント(英語)

公式ドキュメント(日本語)

< コード例 >
マーカーのプロパティに label をセットします。


// 空港IATAラベル //
    let label = new google.maps.Marker({
      position: latlng,
      map: this.map,
      icon: {
        url: '',
        size: new google.maps.Size(1, 1),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
      },
      label: {
        text: this.poptxt,
        color: '#ffff00',
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        fontSize: '14px'
      }
    });

// 中央上ラベル //
          DrawMapG.nclabel = new google.maps.Marker({
            position: nclatlng,
            map: mapThis,
            icon: {
              url: '',
              size: new google.maps.Size(1, 1),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, -12), // //左に0px、下に12px テキストはセンター
            },
            label: {
              text: this.nctxt,
              color: '#ffffff',
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              fontSize: '14px'
            }
          });

         // 中央下ラベル //
          DrawMapG.sclabel = new google.maps.Marker({
            position: sclatlng,
            map: mapThis,
            icon: {
              url: '',
              size: new google.maps.Size(1, 1),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(0, 30), // //右に0px、上に30px テキストはセンター
            },
            label: {
              text: this.sctxt,
              color: '#ffffff',
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              fontSize: '14px'
            }
          });

< 画面例 >

Tabulator addRow()で行を追加した時の位置が上と下があるので

投稿日: 投稿者:

Tabulator addRow()で行を追加した時、原因はわかりませんが、既存の表の一番上に挿入されたり、一番下に追加されたりするので、戸惑いそうなので、上下線を入れて強調させてみました。

< コード例 >
CSS


.border-bottom-red1 {
    border-bottom: solid 1px red
}

.border-bottom-red2 {
    border-bottom: solid 2px red
}
.border-top-red1 {
    border-top: solid 1px red
}

.border-top-red2 {
    border-top: solid 2px red
}

Javascript


  // @@ テーブルタイトル右側 +アイコンを押した時 @@ //
  // ++ 追加 ++ //
  $(document).on("click", "#addarow", function (e) {
    //alert ("plus button clicked")

    // table行追加 //
    table.addRow({NM_GROUP: userGroup, DT_DEP: TODAY_FORMAT, ID_USER: userId, NO_FLIGHT: "NH____",
      IS_NOTIFY: 0, DEP_IATA: "", ARV_IATA: ""}, true)
    //table.selectRow([-1]);

    $("#savearow").removeClass("dsp_none")
    $("#savearow").show()
    $("#cancelarow").removeClass("dsp_none")
    $("#cancelarow").show()
    
    // 行を強調 //
    // NH____の行を特定 //
    const rows = table.getRows()
    rows.forEach((row) => {
      const noflight = row.getData().NO_FLIGHT
      if (noflight === "NH____") {
        
        const elm = row.getElement()
        $(elm).addClass("border-bottom-red1")
        $(elm).addClass("border-top-red1")
        return
      }
    })

    // == 以下省略 == //


  })

< 画面例 >