Vue+Leaflet实现加载OSM显示地图

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

如果是在Vue中怎样实现。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、安装leaflet

npm install leaflet --save

2、代码实现基本同上

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

<script>
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
export default {
  name: "helloLeafletLoadOSM",
  data() {
    return {
  map: null,
       OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
  this.map = L.map("map");
  this.map.setView([34.03, -118.15], 13);
  let tileLayer = L.tileLayer(this.OSMUrl)
     tileLayer.addTo(this.map)
 },
  },
};
</script>

<style scoped>
.map {
   100%;
  height: 400px;
}
</style>

3、效果