如何在VUE中使用leaflet地圖框架

前言：在leaflet的官方文檔只有靜態的HTML演示並沒有結合VUE的demo  雖然也有一些封裝好的leaflet庫例如Vue-Leaflet，但是總感覺用起來不是那么順手，有些業務操作還是得用leaflet的API好用

步驟1：npm install leaflet  （搭建vue項目就跳過了）

頁面中先下載好npm包  下一步就是在vue用引用了（以下方法都是網上教程自己整理出來的）

Main.js (也可以在入口的 .vue 頁面)

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

步驟2：leaflet初始化

HTML

<div id="map"></div>

JS （注意哦：需要在頁面渲染完成后才能執行不然會報錯）

initMap() {
      let map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [39.550339, 116.114129],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      this.map = map;　　　　//data上需要掛載
      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);
    },

 最后補充： div樣式需要設置寬高100% 不然會報錯

#map {

　　width:100%;

　　height:100vh;

}