Leaflet JavaScript マウスオーバーでマーカーを強調

< コード例 >

マウスオーバー用拡大アイコン


 // 通常サイズ用 //
  // 通常 //
        const icn = L.icon({
          iconUrl: "Img/aptower_50_" + iconcol + ".png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [sz, sz]
        });
 
 // マウスオーバー用 //
        const icnmon = L.icon({
          iconUrl: "Img/aptower_64_yellow.png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [38, 38]
        });

マウスが乗った時にマウスオーバー用拡大アイコンをセット
外れた時は元のサイズに戻す


// @@ マウスが乗った時 @@ //
        marker.on("mouseover", function (e) {
          // 大きい黄色のアイコンに変える //
          marker.setIcon(icnmon)
        })
        // @@ マウスが外れた時 @@ //
        marker.on("mouseout", function (e) {
          // からし色並サイズアイコンに戻す //
          marker.setIcon(icn)

        })

< 画面例 >

通常サイズ

拡大サイズ

コメントを残す