这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

安装leaflet依赖包

本章教程安装的leaflet是1.7.1版本的。

npm install leaflet

组件中的配置

先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。

先引入初始化地图需要的类。

  import 'leaflet/dist/leaflet.css'
  // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
  import * as L from 'leaflet'

leaflet.css文件通常样式配置，这里就不介绍了。

dom节点

先在布局中创建一个div，充当地图存放的容器，通过id来进行初始化绑定。

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

div的样式设置

 .map{
    width: 100%;
    height: 100%;
    position: absolute;
  }

初始化地图

定义地图初始化函数

L.map API 的核心类 - 它用于在页面上创建地图并对其进行操作。

该方法的第二个参数中的地图状态选项如下(还有一些动画选项，交互选项等查看apiapi)：

选项	类型	默认	描述
crs	CRS	L.CRS.EPSG3857	要使用的坐标参考系。如果您不确定它的含义，请不要更改它。
center	LatLng	undefined	地图的初始地理中心
zoom	Number	undefined	初始地图缩放级别
minZoom	Number	*	地图的最小缩放级别。如果未指定且地图中至少有一个GridLayer或TileLayer，minZoom则将使用其选项中最低的一个。
maxZoom	Number	*	地图的最大缩放级别。如果未指定且地图中至少有一个GridLayer或TileLayer，maxZoom则将使用其选项中的最高选项。
layers	Layer[]	[]	最初将添加到地图的图层数组
maxBounds	LatLngBounds	null	设置此选项后，地图会将视图限制在给定的地理范围内，如果用户尝试在视图外平移，则会将用户弹回。要动态设置限制，请使用 setMaxBounds方法。
renderer	Renderer	*	在地图上绘制矢量图层的默认方法。L.SVG 或L.Canvas默认情况下取决于浏览器支持。

    methods: {
      init(){
       let map = L.map("leaflet", {
            minZoom: 3,
            maxZoom: 14,
            center: [120.2,30.1666],
            zoom: 6,
            zoomControl: false,
            attributionControl: false,
            crs: L.CRS.EPSG3857
          });
          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);
      }
    },

组件mounted的时候调用初始化函数

    mounted() {
      this.init()
    },

最终效果