如何在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;

}