在传单弹出窗口中显示列表 [英] Display a list in leaflet popup

问题描述

我想在传单弹出窗口中显示无序列表或表格. 项目的数量及其内容是不同的，并且取决于单击的元素的类型.
因此理想情况下，应在click事件上创建弹出内容.

I want to display an unorderd list or table in a leaflet popup. The number of items and their content are different and depend on the type of element which was clicked.
So ideally the popup content should be created on the click event.

我试图在bindPopup函数中构建列表，但是它不起作用.

I tried to build the list inside the bindPopup function, but it's not working.

      L.marker([mapElement.y * -1, mapElement.x], {
      uniqueID: mapElement.elementID,
      mapIconWidth: mapElement.width,
      icon: new mapIcon({
        iconUrl: icon.mapIcon.imageData,
        iconSize: [elementSize, elementSize]
      })
    })
      .addTo(markers)
      .bindPopup(mapElement.element.nbr + ' ' + mapElement.element.name +  "<br/<ul>  <li v-for='state in mapElement.element.states'>{{ state.definition.stateTypeTitle }}</li> </ul>");

这是输出:

任何想法都很棒！ 谢谢！

Any ideas would be great! Thanks!

编辑后的代码(获取此错误消息:您正在使用Vue的仅运行时版本，而模板编译器不可用.要么将模板预编译为渲染函数，要么使用包含编译器的版本. ):

Edited code (get this error message: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.):

LoadMarker(mapID) {
  console.log("Load Markers");
  map.removeLayer(markers);
  markers.clearLayers();

  fetch(this.$apiUrl + "/mapelements/" + mapID)
    .then(response => response.json())
    .then(received => {
      let mapElements = received;
      let mapZoom = map.getZoom();

      mapElements.forEach(function(mapElement) {
        let elementSize = (mapElement.width / 8) * mapZoom;


          let popup = new Vue({
          template:
            mapElement.element.nbr +
            " " +
            mapElement.element.name +
            "<br/<ul>  <li v-for='state in mapElement.element.states'>{{ state.definition.stateTypeTitle }}</li> </ul>",
          data: {
            mapElement
          }
        }).$mount().$el;


        let icon = mapIconSchemas.find(
          schema => schema.mapIconSchemaID == mapElement.mapIconSchemaID
        );
        if (icon != null) {
          L.marker([mapElement.y * -1, mapElement.x], {
            uniqueID: mapElement.elementID,
            mapIconWidth: mapElement.width,
            icon: new mapIcon({
              iconUrl: icon.mapIcon.imageData,
              iconSize: [elementSize, elementSize]
            })
          })
            .addTo(markers)
            .bindPopup(popup);
        }
      });
    });

  map.addLayer(markers);
},

推荐答案

如果您想使用 vue模板引擎填充弹出内容，则有一个解决方案.

There is a solution, if you want to use the vue templating engine to fill the popup content.

我为此对此进行了解释

I explained it for this question.

使用要在弹出窗口中显示的内容创建一个组件，但是将其隐藏:

You create a component with the content you want to display in the popup, but you hide it :

<my-popup-content v-show=False ref='foo'><my-popup-content>

然后，您可以像这样在代码中访问该组件的生成的html:

Then you can access the generated html of that component in your code like this :

const template = this.$refs.foo.$el.innerHTML

并使用它填充您的弹出窗口.

and use it to fill your popup.

该方法的最大优点是您可以生成具有所有vue功能(v-if，v-bind等)的弹出内容，并且不再需要混乱的字符串连接.

The big advantage of that method is that you can generate the popup content with all the vue functionalities (v-if, v-bind, whatever) and you don't need messy string concatenations anymore.

这篇关于在传单弹出窗口中显示列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！