利用Leaflet.js创建交互式地图：单个点位绘制-CSDN博客

本文链接：https://blog.csdn.net/m0_54340021/article/details/141227163

引言

在现代Web应用中，地图已成为不可或缺的一部分，无论是用于导航、位置服务还是数据可视化。Vue.js，作为一个轻量级且高效的JavaScript框架，提供了构建用户界面的灵活性和强大功能。而Leaflet，一个开源的JavaScript库，以其轻量级和易用性著称，成为实现地图功能的首选。本文将分享如何结合Vue.js和Leaflet，构建一个交互式地图组件。

组件设计

我们的地图组件将接收以下属性（props）：

iconUrl：标记图标的URL。
iconSize：图标的大小。
iconLatLng：标记的经纬度坐标。
enableMapClick：是否启用地图点击事件。

组件的数据（data）将包含：

map：Leaflet地图实例。
marker：Leaflet标记实例。

实现步骤与代码示例

这里提供的代码块仅展示了部分关键功能，以帮助读者理解整个实现过程，完整的代码和项目资源可以在个人中心-资源库获取

1. 地图初始化

在Vue组件的mounted生命周期钩子中初始化地图，并设置地图的初始视图和交互行为

initMap() {
    // 实例
    this.map = L.map("mapRef", {
        center: [21.582007, 111.824558], // 地图中心
        zoom: 15, // 缩放比列
        zoomControl: false, // 是否显示 + - 按钮
        doubleClickZoom: false, // 是否双击放大
        // scrollWheelZoom: false, // 是否可以通过滑轮缩放
        attributionControl: false, // 是否显示右下角leaflet标识
    });
    // 加载出地图
    this.name = L.tileLayer(
        "http://webrd01.is.autonavi.com/...（省略地址）",
        {   
            maxZoom: 18,
            attribution: '© OpenStreetMap contributors',
        },
    ).addTo(this.map);
    if (!this.enableMapClick) {
      // 如果enableMapClick为true，则绑定点击事件
      this.map.on('click', this.addMarker);
    }
    console.log(this.iconLatLng,'this.iconLatLng');
    
    if(this.iconLatLng.length === 2){
      this.addMarkerWithDefaultLatLng(this.iconLatLng);
    }
},

2.点位绘制实现

处理绘制事件，为新创建的图层设置样式，并添加到地图上

// 操作地图添加点位
addMarker(e) {
      console.log(this.iconUrl,this.iconSize,'准备添加点位');
    if (this.marker) {
        this.map.removeLayer(this.marker);
    }
    if(this.iconUrl && this.iconSize){
      const icon = L.icon({
          iconUrl: this.iconUrl,
          iconSize: [this.iconSize, this.iconSize],
      });
      this.marker = L.marker(e.latlng, { icon: icon }).addTo(this.map);
      console.log(e.latlng,'传递经纬度');
      this.$emit('marker-clicked', e.latlng); // 触发事件，传递经纬度
    }else{
        this.$message({
            message: '请先选择符号和大小',
            type: 'warning'
        });
    }
},