<template>
  <div id="leaflet-map"></div>
</template>

<script>
import L from "leaflet";
export default {
  data() {
    return {
      townCenter: [31.4865100338683, 121.11104941651722],
      mapRotate: 0, //地图旋转角度
    };
  },
  mounted() {
    this.initMapData();
  },
  methods: {
    initMapData() {
      this.globalMap = L.map("leaflet-map", {
        center: this.townCenter, // 地图中心[纬度，经度]
        zoom: 13, // 地图层级
        maxZoom: 16,
        minZoom: 13,
        zoomControl: false, // 放大缩小按钮
        attributionControl: false, // 右下角leaflet图标
        rotate: true,
        bearing: this.mapRotate,
      });
    },
  },
};
</script>

<style>
#leaflet-map {
  height: 100%;
  width: 100%;
}
.leaflet-container {
  background: transparent !important;
}
</style>
