从函数vue2leaflet加载弹出内容

时间:2018-11-12 19:16:37

标签: vue.js leaflet

我将从函数中加载弹出窗口的内容。每次单击标记时,我想更改弹出窗口的内容。 我该怎么办?

以下代码仅创建一次内容。

html:

<template>
  <div>
    <l-map :zoom="zoom" :center="center" style="height:500px">
      <l-tile-layer :url="url" :attribution="attribution"/>
      <l-marker :lat-lng="marker">
        <l-popup :content="String(randomNumber())"/>
      </l-marker>
    </l-map>
  </div>
</template>

脚本:

import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css'
export default {
  name: 'example',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
  },
  data () {
    return {
      zoom:11,
      center: L.latLng(52.376705, 4.894046),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a     href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(52.37, 4.89),
    }
  },
  methods: {
    mounted() {
    randomNumber: function () {
        return String(Math.random())
    }
  }
}

0 个答案:

没有答案