浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react-leaflet】特定の住所の緯度経度に移動する

leafletマップの中に、タップすると特定の住所の位置に移動するボタンを作るために

色々試行錯誤していました。

leafletのライブラリleaflet.locatecontrolでもいけると思ったのですが、こっちは位置情報しか

取ってこれないので、特定の住所へ移動するという動きはできませんでした。

なんだかんだでマップの中にボタンを埋め込んでそれらしい見た目にする・その場所の緯度経度

をsetViewするという動きが一番しっくりきたのでその仕様にそってボタンを作りました。

//マップレイアウト
<div id="map" style={{height: '200px'}}>
  <Button className="current-button" onClick={() => {this.current()}}>
    <Icon size={14} style={{color: "#000"}} class={"fas fa-map-marker"} icon={{default: "fa-map-marker"}}></Icon>
  </Button>
</div>
//css
.current-button{
    position: absolute;
    bottom: 20px;
    left: 10px;
    padding: 0px 10px;
    z-index: 100000;
    background-color: #fff;
    border: solid 1px #c4bdbd;
  }

スクショ

z-indexでボタンを優先して前に出すのがポイントです。

  • この記事いいね! (0)