Vue选项式API如何编程式动态添加vue-leaflet的l-polyline组件

基于vue-leaflet开发地图应用，目标实现点击地图添加路径功能，现有基础配置已完成，运行时无法向模板中动态添加l-polyline组件。曾尝试通过原生DOM API插入组件标签，内容被直接解析为普通文本，无法编译渲染为正常Vue组件，要求l-polyline必须放置在<l-map></l-map>标签内部。

现有代码片段 #

l-map组件初始化代码 #

<l-map
  class="mainMap"
  ref="map"
  v-if="isLocAvailable"
  v-model="zoom"
  v-model:zoom="zoom"
  :center="currLocation"
  @zoom="zoomUpperBound"
  :options="{ zoomControl: false, maxZoom: 18 }"
  @click="getCurrLoc"
>

地图点击回调方法 #

getCurrLoc(e) {
  try {
    const { lat, lng } = e.latlng;
    if (this.onCreateMode === true) {
      this.locations.push([lat, lng]);
    }
  } catch (err) {
    console.log("what is err");
  }
},

待补全逻辑的折线创建方法 #

createPolyline() {
  console.log(this.locations);
  // 待实现动态添加路径核心逻辑

  // 重置输入状态
  this.pathName = "";
  this.onCreateMode = false;
  this.locations = [];
},

不要通过原生DOM API插入Vue组件标签，Vue组件基于虚拟DOM渲染，原生插入的DOM字符串不会走Vue编译流程，自然无法正常渲染。直接利用Vue的响应式机制，通过数据驱动视图渲染即可，步骤如下：

• 在组件的响应式data中新增polylineList数组，初始值为空，用于存储所有已创建完成的折线配置。
• 在<l-map>标签内部，直接声明l-polyline组件，通过v-for遍历polylineList完成批量渲染，为每个折线项绑定唯一key、坐标参数和自定义样式。模板中添加的代码如下：

<!-- 放置在l-map标签内部，与其他地图子组件同级 -->
<l-polyline
  v-for="line in polylineList"
  :key="line.id"
  :lat-lngs="line.coordinates"
  :color="line.color || '#2563eb'"
  :weight="3"
/>

• 补全createPolyline方法逻辑：将当前收集到的坐标点包装为折线配置项，推入polylineList数组即可，响应式系统会自动触发新组件渲染，无需手动操作DOM。补全后的代码如下：

createPolyline() {
  console.log(this.locations);
  // 坐标点数量≥2才可以构成有效折线
  if (this.locations.length >= 2) {
    this.polylineList.push({
      id: Date.now(), // 用时间戳作为列表项唯一标识
      coordinates: [...this.locations], // 浅拷贝坐标数组，避免后续状态重置影响已生成的折线
      name: this.pathName
    })
  }

  // 重置输入状态
  this.pathName = "";
  this.onCreateMode = false;
  this.locations = [];
},

交互优化：如果需要在点击选点过程中实时预览正在绘制的折线，可以额外增加一个绑定locations数组的l-polyline，专门展示绘制中的临时路径，不用等提交才显示折线。

内容的提问来源于stack exchange，提问作者Jatin Thakur