0

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

4

2 回答 2

0

我遇到了同样的问题。

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

于 2021-09-29T15:53:04.383 回答
0

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

于 2021-05-09T16:17:49.063 回答