アイスコールドコカコーラのマップをGoogleMapからOSM(OpenStreetMap)に移行しようとした際に、拡大縮小ボタンが二つ表示されるようになって、対処法の情報があんまりなかったので備忘録として残しておく。
環境
- Vue3.2.13
- vue-leaflet0.10.1
- JavaScript
事象
l-control-zoomを使って拡大縮小ボタンを右下に移そうとした際に、下記の画像のように左上と右下に拡大縮小ボタンが二つになった。
事象発生時のサンプルソース
事象発生時のサンプルソース
<template>
<l-map ref="map" v-model:zoom="zoom" :use-global-leaflet="false" :center="center"
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
<l-control-zoom position="bottomright" />
</l-map>
</template>対処法
l-mapタグ内に[:options=”{zoomControl: false}”]を入れる。
解決時のサンプルソース
[:options=”{zoomControl: false}”]を入れてあげることで拡大縮小ボタンが非表示になる。
<template>
<l-map ref="map" v-model:zoom="zoom" :use-global-leaflet="false" :center="center" :options="{zoomControl: false}">
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" />
<l-control-zoom position="bottomright" />
</l-map>
</template>
右下に移したボタンは表示されるので、内部でどんな動きしてるかは謎。
それか自分の使い方が間違っているか。
まぁとりあえずこれで拡大縮小ボタンが二重に表示される問題は解決。
コメント