将放大/缩小移动到左上角以外的其他位置

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组件添加到您喜欢的位置。就像-

<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>

​

在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