leaflet自定义 Popup，实现数据动态显示

Leaflet 1.9.3 中文文档 - 帮助手册&教程 - 《leaflet 中文文档 - 帮助手册 - 教程》 - 极客文档 (geekdaxue.co)

var popup = L.popup()
    .setLatLng(latlng)
    .setContent(‘<p>Hello world!<br />This is a nice popup.</p>’)
    .openOn(map);

leaflet 官方示例中，content 里面是html ，不能识别 vue 语法，这为动态数据的绑定造成了困难。

解决方法：在popup中显示vue组件 Leaflet中实现在popup中展示Vue组件功能 - 掘金 (juejin.cn)

1. 新建info 组件，通过prop接收数据

  props: {
    nowDetail: {
      default: () => {
        return {};
      },
      type: Object,
    },
  },

2. 在父组件中引入info 组件 ;(根据自己的需要选择是否隐藏显示，我的是直接被map覆盖掉了，看不见；使用visible属性，可能要在开启、关闭popup时进行一些操作)

    <DetailWindow :nowDetail="nowDetail"
                  ref="detailWindow">
    </DetailWindow>

import DetailWindow from './info.vue'

3. 将this.$refs.detailWindow.$el绑定在popup上

 this.popup = L.popup().setContent(this.$refs.detailWindow.$el)