Mapbox-GL 地図を描画すると右半分にしか表示されない

こんな状態になる。言葉では説明しづらいが、ホイールでズームイン/アウトしたときの中心座標も右にズレてる。

App.vue

原因

単純な話で、text-align: centerposition: absolute を一緒に使っちゃダメというだけのこと。

MapBox-GLによってDOMに追加されるcanvas要素には、以下の3つのスタイルが直接指定される。

<canvas class="mapboxgl-canvas" width="1247" height="500" style="position: absolute; width: 1247px; height: 500px;"></canvas>

position: absolute
width: (親要素のwidth)
height: (親要素のheight)

ここで、Vue.js では、initで作成されるサンプルのルート要素に以下が指定されている。

<style>
#app {
  /* ..略.. */
  text-align: center;
}
</style>

特に何も考えずこれを流用していると、 position:absolute 要素のアンカーは左上にあるので、text-aling:center によって要素の左上が画面の中央に持ってこられてしまった。

解決策

ルート要素の text-align を消すか、canvasの親要素に text-align: left などを適用して上書きすればいい。

このウェブサイトはクッキーを使用しています。 Webサイトを使用することで、あなたはあなたのコンピュータにクッキーを保存することに同意します。 また、あなたはあなたが私たちのプライバシーポリシーを読んで理解したことを認めます。 同意しない場合はウェブサイトを離れてください。クッキーに関する詳細情報
programming/web_development/javascript/vuejs/troubleshooting/mapboxgl.txt · 最終更新: 2019/05/21 by ikatakos
CC Attribution 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0