Question

我正在尝试使用以下方法在地图（谷歌地图）上渲染一组对象

Vue2Leaflet 和 vue2-leaflet-googlemutant插件

渲染地图并尝试点击marker之后，popup不会显示并给我以下错误

我的组件代码在这里

        <template>
    <v-map :zoom=6 :center="center">
      <v-tilelayer-googlemutant :apikey="apikey" :options="options"></v-tilelayer-googlemutant>
      <l-marker v-for="(Device,index) in Devices" :key="index" :latLng=[Device.lat,Device.lng] >
                    <<l-popup  >
                      <span>{{Device.name}}</span>
                    </l-popup>
          </l-marker>
    </v-map>
  </template>

  <script>
    import L from 'leaflet'
    import * as Vue2Leaflet from 'vue2-leaflet'
    import Vue2LeafletGoogleMutant from './Vue2LeafletGoogleMutant'

  delete Vue2Leaflet.L.Icon.Default.prototype._getIconUrl;

  Vue2Leaflet.L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
  });

    export default {
      components: {
        'v-map': Vue2Leaflet.LMap,
        'v-tilelayer': Vue2Leaflet.LTileLayer,
        'v-tilelayer-googlemutant': Vue2LeafletGoogleMutant,
        'LMarker': Vue2Leaflet.LMarker,
        'LPopup': Vue2Leaflet.LPopup,
      },
      methods: {

      },
      data: () => ({
        hidden:false,
        search:'',
        status:'',
        apikey : 'AIzaSyDodDEbWBuqI6QBF-j4Ikcgf_Fvf9SAGi8',
        options:{
          type:"roadmap"
        },
         zoom:6,
          center: L.latLng(32.82421110161336,-5.42724609375),
          url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
          attribution:'mohsine',
      }),
      computed: {
        groups:function () 
        {
          return this.$store.state.groups
        },
        Devices:function () 
        {
          return this.$store.getters.Devices.filter(Device => {
           return Device.name.toLowerCase().includes(this.search.toLowerCase()) && Device.online.toLowerCase().includes(this.status)
          })
        }
      },
      mounted:function () {
        this.$store.dispatch('UpdateDevices',this.$http);
      },


    }
  </script>

有谁能帮忙吗？

vue2-leaflet时出错：未被捕获的TypeError：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

0 个答案: