How to use the map leaflet in the framework of the VUE

Introduction: In the demo only official document leaflet static HTML presentation is not a good combination of VUE, although there are some good package leaflet libraries such as Vue-Leaflet, but always felt not so smoothly with them, and some business operations or starting a leaflet of API use

Step 1: npm install. Leaflet (build vue project is skipped)

Page to download the package npm good next step is to use vue references (the following methods are sorting out their own online tutorials)

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

Step 2: leaflet Initialization

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);
    },