Vue Leaflet 更改缩放控件的样式答案

【问题标题】：Vue Leaflet Change Style of Zoom ControlVue Leaflet 更改缩放控件的样式
【发布时间】：2020-11-24 16:59:11
【问题描述】：

我正在尝试使用 Vue 在暗模式下制作地图应用程序，但由于某种原因，我无法更改缩放控件的样式。目前我正在尝试以下

template>
  <div class="main-map">
    <l-map :zoom="zoom" :center="currLatLng" :options="{zoomControl: false}">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-control-zoom position="topleft" :options="{class: 'leaflet-control-zoom'}"></l-control-zoom>
    </l-map>
  </div>
</template>

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

export default {
  name: 'Map',
  components: { LMap, LTileLayer, LCircleMarker, LControlZoom },
  props: ['currLatLng', 'trackpoints', 'collectedPoints'],
  data() {
    return {
      zoom:15,
      url:'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
      attribution:'&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    }
  }

<style scoped>
.leaflet-control-zoom a {
  color: white !important;
  background: rgba(0, 0, 0, 0.5) !important;
  transition: all 0.5s ease;
}

.leaflet-control-zoom a:hover {
  color: white !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

</style>

但缩放控件看起来仍然正常。

我已经尝试过同样的:options="{class: 'leaflet-control-zoom'}"，它也没有任何作用。我在这里错过了什么？

【问题讨论】：

标签： javascript vue.js leaflet vue2leaflet

【解决方案1】：

您可以尝试将课程排除在选项之外。例如。： <l-control-zoom position="topleft" class="leaflet-control-zoom"></l-control-zoom>

【讨论】：

【解决方案2】：

我遇到了同样的问题。

我尝试了将:options="{zoomControl: false}" 中的<l-map> 更改为:options="{zoomControl: true}" 并且成功了。

【讨论】：