package.json中引入并安装：

"leaflet": "~1.4.0",
"vue2-leaflet": "^2.5.2"

组件写法：

<template>
  <div class="vue-leaflet">
    <l-map
      style="width: 100%; height: 100%"
      :zoom="map.zoom"
      :center="map.center"
      :min-zoom="map.minZoom"
      :max-zoom="map.maxZoom"
    >
      <l-tile-layer :url="map.url" />
      <template v-for="(item, index) in points">
        <l-marker
          :key="index"
          :lat-lng="[item.lat, item.lng]"
          :icon="item.icon"
          @click="pointClick(item)"
        />
      </template>
      <l-geo-json
        :geojson="map.geoJSON"
        :options-style="map.geoStyle"
      />
    </l-map>

    <div class="search-tool">
      查询等功能。。。
    </div>
  </div>
</template>

<script>
import * as Leaflet from 'leaflet'
import 'leaflet/dist/leaflet.css'
import hb from '@/assets/json/hubei.json' // 边界线JSON文件
import { LMap, LTileLayer, LMarker, LGeoJson } from 'vue2-leaflet' // 渲染组件
export default {
  name: 'ZsMap',
  components: {
    LMap, LTileLayer, LMarker, LGeoJson
  },
  data() {
    return {
      map: {
        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
        zoom: 7,
        minZoom: 2,
        maxZoom: 16,
        center: [30.978551, 112.730713],
        geoJSON: hb,
        geoStyle: {
          color: '#1E9FFF',
          fillColor: '#E8E8E8',
          weight: 1,
          opacity: 1,
          fillOpacity: 0.2
        }
      },
      points: [], // 点位对象数组
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      // 请求数据响应中初始化点位 this.initPoint(data.data)
      
    },
    // 加载点位
    initPoint(data) {
      data.forEach(element => {
        element.icon = Leaflet.icon({
          iconUrl: require('静态文件中的图标'),
          iconSize: [20, 20]
        })
      })
      this.points = data
    },
    // 点位点击事件
    pointClick(item) {
        
    }
  }
}
</script>

<style lang='scss' scoped>
.vue-leaflet {
  height: calc(100vh - 5.3rem);
  position: relative;
}

/deep/.leaflet-left {
  display: none !important;
}

.search-tool {
  position: absolute;
  top: 1.125rem;
  left: 0.8125rem;
  z-index: 1231;
  display: flex;
}

</style>