Vue TypeScriptでGoogleMapを使う でGoogle Mapを使えるようにした。
そこにアイコンを描画したい。
前提
- GoogleMapにアイコンを表示するには、画像ファイルを指定する
- Vue.jsのプロジェクトで、svgはすべて画像ファイルとしてではなく、Vueコンポーネントとして管理している
- 画像ファイルがないので、どうやってGoogle Map上にアイコンを描画しようか考えた
BaseIcon.vue
data URL に変換する
コンポーネントをマウント
→ el要素からsvg文字列を抜き出す
→ svg文字列をbase64にして、data URLを作る
GoogleMapMarker.vue