以前の記事で、「react-native-mapbox-gl」ライブラリを使って React Native のアプリに Mapbox を実装する方法について紹介しましたが、その後開発を進める中で、地図上に設置したマーカーが指定した場所からずれるという現象が発生しました。
ライブラリの GitHub のページはこちら。
react-native-mapbox-gl/maps: A Mapbox GL react native module for creating custom maps
https://github.com/react-native-mapbox-gl/maps
ライブラリの <MapboxGL.MarkerView /> コンポーネントを使ってマーカーを表示していたのですが、実際にアプリを確認してみると、地図の左端の方にマーカーがズレているという状況でした。
しかも地図を拡大していくと、次第に指定した緯度経度まで近づいていくというよく分からない挙動をする…。
で、Issues なんかも見てみたのですが、最終的に <MapboxGL.PointAnnotation /> を使うことで解決できました。
緯度経度を何も変えない状態で、MarkerView から PointAnnotation に変更したところ、指定した通りの位置にマーカーが表示されました！
また、使ってみてわかったのですが、マーカーピンとして使うなら <MapboxGL.MarkerView /> より <MapboxGL.PointAnnotation /> の方が使い勝手が格段に良かったです。
ドラッグで位置を移動できるし、吹き出しも実装できるし…。
ということで、react-native-mapbox-gl ライブラリで地図を実装する際は、マーカーは <MapboxGL.PointAnnotation /> を使って指定するようにしましょう！
…ちなみに、何故 <MapboxGL.MarkerView /> を使うと位置がズレるのかは分かりませんでした。
以上、React Native の react-native-mapbox-gl ライブラリで地図を表示した際、マーカーピンがズレる時の対処法についてでした。
ご参考になれば幸いです。
