时间戳

首页 > 解决方案 > Vue Leaflet 更改缩放控件的样式

javascript - Vue Leaflet 更改缩放控件的样式

问题描述

我正在尝试使用 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'}"其中也没有任何作用。我在这里想念什么？

标签： javascriptvue.jsleafletvue2leaflet

解决方案

我遇到了同样的问题。

我试了一下，换成:options="{zoomControl: false}"了<l-map>，:options="{zoomControl: true}"效果很好。

推荐阅读