Vue3 引入地图 + 添加标记点

Vue3 中引入地图并添加标记点通常会结合使用 ECharts 或 Leaflet 这样的地图库，它们都提供 API 来在网页上展示地理位置信息并添加标记。以下是简单的步骤：

1. **安装依赖**：首先，你需要安装 Vue 的版本以及地图组件库。例如，你可以使用 `vue2-leaflet` (Leaflet) 或者 `echarts-for-vue` (ECharts)。安装命令如下：

   npm install vue2-leaflet leaflet echarts-for-vue --save

2. **配置入口**：在项目中引入地图相关的 CSS 和 JS 文件，并在主入口文件中导入它们，如：

   import { Map } from 'vue2-leaflet';
   import 'leaflet/dist/leaflet.css';
   import 'leaflet.markercluster/dist/MarkerCluster.css';

3. **创建组件**：在 Vue 组件中，使用 `v-leaflet` 或 `<map>` 标签创建地图容器，并配置基础地图设置：

   <template>
     <div>
       <map :center="mapCenter" :zoom="mapZoom">
         <!-- 更多地图配置如图层、事件监听等 -->
       </map>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         mapCenter: [51.505, -0.09], // 北京坐标示例
         mapZoom: 10,
       };
     },
     components: {
       Map: Map,
     },
   };
   </script>

4. **添加标记点**：可以使用 Leaflet 的 Marker 对象来添加标记，或者使用 ECharts 提供的 GeoCoord系数组来表示地理坐标，并在其图表上显示标记。例如：

   this.$refs.map.addLayer(L.marker([yourLatitude, yourLongitude]).addTo(this.$refs.map));

5. **交互和数据绑定**：通过地图组件提供的事件监听器，可以在用户点击标记或地图区域时获取经纬度，并与数据源进行关联。