Переместить увеличение / уменьшение в другое место, чем верхний левый угол

Question

При использовании Vue2Leaflet и компонента "l-map", есть ли способ переместить кнопки увеличения / уменьшения в другое место, чем левый верхний угол?

https://vue-leaflet.github.io/Vue2Leaflet/# / components / l-map /? id = props

https://i.stack.imgur.com/ITRFr.png

Answer 1

Сначала необходимо отключить элементы управления масштабированием по умолчанию. Затем добавьте компонент LControlZoom с вашей предпочтительной позиции. like-

<l-control-zoom position="bottomleft"></l-control-zoom>

HTML:

<template>
 <l-map style="height: 350px" :zoom="zoom" :center="center" :options="{zoomControl: false}">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-control-zoom position="bottomleft"></l-control-zoom>
 </l-map>

in javaScript

<script>
import {LMap, LTileLayer, LControlZoom} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LControlZoom
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      zoom: 8,
      center: [47.313220, -1.319482],
    };
  }
}
</script>

Надеюсь, это поможет. Прочитайте документацию vue2-leaflet: https://vue2-leaflet.netlify.com/components/LControlZoom.html