vue2使用 leaflet

Vue2可以与Leaflet地图库很好地配合使用。下面是使用Vue2和Leaflet创建地图的一般步骤：

1. 安装Leaflet和Vue2：在项目根目录下运行以下命令安装所需的依赖：

npm install leaflet vue2-leaflet

2. 在Vue组件中引入所需的模块：

import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';

3. 在模板中使用地图组件：

<template>
  <div id="map">
    <l-map :zoom="13" :center="mapCenter">
      <l-tile-layer :url="tileLayerUrl"></l-tile-layer>
      <l-marker :lat-lng="markerCoords"></l-marker>
    </l-map>
  </div>
</template>

4. 在Vue组件的`data`属性中定义地图的初始状态：

data() {
  return {
    mapCenter: [51.505, -0.09],
    tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    markerCoords: [51.505, -0.09]
  };
}

5. 样式调整：为了使地图正常显示，您可能还需要在全局CSS文件中添加一些样式，以覆盖默认的Leaflet样式。

这样，您就可以使用Leaflet创建一个基本的地图，其中包含一个初始位置和一个标记。

请注意，以上仅为基本示例，您可以进一步扩展和定制Vue组件以满足您的需求。如果需要更多功能，请参考Vue2和Leaflet的官方文档。