在vue中加载leaflet地图

1.引入

npm install leaflet --save

2.在main.js中引入

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

3.在vue中复制粘贴直接使用

<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet</div>
    <!-- 地图容器 -->
    <div id="map"></div>
  </div>
</template>
 
<script>
  export default {
    name: 'LeafletMap',
    data() {
      return {
        map: null
      }
    },
    mounted() {
      // 地图初始化
      this.initMap()
    },
    methods: {
      // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
      initMap() {
        let map = L.map("map", {
          center: [24.485666, 118.095498], // 中心位置
          zoom: 12, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true //缩放控件
        });
        this.map = map; // data上需要挂载
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加载底图
      }
    }
  }
</script>
<style scoped>
  #map {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }
</style>