在Vue.js中使用leaflet-vue轻松加载Leaflet地图

2024-01-08 07:08:14

leaflet-vue中轻松加载Leaflet

导言

Leaflet是一个轻量级的开源JavaScript库，用于创建交互式地图。它以其小巧高效、功能强大和易于使用而闻名。本文将介绍如何在Vue.js应用程序中使用leaflet-vue库轻松加载Leaflet。

加载Leaflet依赖包

首先，使用npm或Yarn包管理器安装leaflet和leaflet-vue依赖项：

npm install leaflet leaflet-vue

或

yarn add leaflet leaflet-vue

组件中的配置

在Vue组件中，需要在模板中创建一个div元素作为地图容器：

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

然后在script部分，导入Leaflet和leaflet-vue，并创建一个Vue实例：

<script>
import { Map, TileLayer } from 'leaflet';
import 'leaflet-vue';

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map('map');

      new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(this.map);

      this.map.setView([51.505, -0.09], 13);
    },
  },
};
</script>