Leaflet+vue

安装leaflet

npm i leaflet

全局引用（main.js）

import L from "leaflet";
import "leaflet/dist/leaflet.css";

vue页面初始化使用 

<template>
  <div id="container"></div>
</template>
<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    const a = this;
    a.initMap();
  },
  methods: {
    initMap() {
      let map = L.map("container", {
        minZoom: 3,
        maxZoom: 14,
        center: [33.550339, 113.114129],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        // crs: L.CRS.EPSG3857,
      });
      this.map = map;
      window.map = map;
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map);
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>