Leaflet Can'；t加载Vue组件内部的传单

我正在尝试创建一个作为Vue组件的传单图，但是我在开始时遇到了一些困难。我通过npm安装了传单

我哪里做错了？log（传单）正在返回传单对象，但我无法使贴图展开和渲染

如能提供一些指导，将不胜感激

<template>
    <div id="map"></div>
</template>

<script>
    // import leaflet here?
    import Leaflet from 'leaflet';

    export default {
        components: {
            Leaflet
        },

        created() {
            console.log(this);
            console.log(Leaflet);
        },

        ready() {
            this.map = L.map('map').setView([51.959, -8.623], 14);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(this.map);
        }
    }
</script>

<style>
    #map {
        height: 100%;
        width: 100%;
        margin-top: -24px;
    }

    /* default legend, layer styling from leaflet template */
    .info {
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
    }
    .info h4 {
        margin: 0 0 5px;
        color: #777;
    }
    .legend {
        text-align: left;
        line-height: 18px;
        color: #555;
    }
    .legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }
</style>

//这里有进口传单吗？
从“传单”进口传单；
导出默认值{
组成部分：{
传单
},
创建（）{
console.log（this）；
控制台日志（传单）；
},
就绪（）{
this.map=L.map（'map'）.setView（[51.959，-8.623]，14）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（此.map）；
}
}
#地图{
身高：100%；
宽度：100%；
利润上限：-24px；
}
/*默认图例，传单模板中的图层样式*/
.info{
填充：6px 8px；
字体：14px/16px Arial，Helvetica，无衬线；
背景：白色；
背景：rgba（255255,0.8）；
盒影：0.15px rgba（0,0,0,0.2）；
边界半径：5px；
}
.info h4{
利润率：0.05倍；
颜色：#777；
}
.传奇{
文本对齐：左对齐；
线高：18px；
颜色：#555；
}
.传奇一{
宽度：18px；
高度：18px；
浮动：左；
右边距：8px；
不透明度：0.7；
}

我只是这么做了，但我也需要底图（bing）

传单包装器.js

const L = require('leaflet')
require('leaflet-bing-layer')

export default L

vue地图

<template>
  <div id="map">
  </div>
</template>

<script>
import L from 'leafletWrapper'

export default {
    name: 'leaflet-map',
    props: ['center', 'zoom', 'minZoom', 'maxZoom', 'markers'],
    data () {
      return {
        mapObject: {},
        markerLayer: {}
      }
    },
 mounted () {
      const bingKey = 'foo'

      this.mapObject = L.map(
        "map", {
          center: this.center,
          zoom: this.zoom,
          minZoom: this.minZoom,
          maxZoom: this.maxZoom
        }
      )

      L.tileLayer.bing({bingMapsKey: bingKey, imagerySet: 'Road'}).addTo(this.mapObject)

    },
    beforeDestroy () {
      this.mapObject.clearAllEventListeners()
    }

  }
</script>

从“传单包装器”导入L
导出默认值{
名称：'单张地图'，
道具：['center'，'zoom'，'minZoom'，'maxZoom'，'markers']，
数据（）{
返回{
映射对象：{}，
标记层：{}
}
},
挂载（）{
const bingKey='foo'
this.mapObject=L.map(
“地图”{
中心：这个，中心，
zoom:this.zoom，
minZoom:this.minZoom，
maxZoom:this.maxZoom
}
)
bing（{bingMapsKey:bingKey，imagerySet:'Road'}）.addTo（this.mapObject）
},
在销毁之前（）{
this.mapObject.clearAllEventListeners（）
}
}

我只是这么做了，但我也需要底图（bing）

传单包装器.js

const L = require('leaflet')
require('leaflet-bing-layer')

export default L

vue地图

<template>
  <div id="map">
  </div>
</template>

<script>
import L from 'leafletWrapper'

export default {
    name: 'leaflet-map',
    props: ['center', 'zoom', 'minZoom', 'maxZoom', 'markers'],
    data () {
      return {
        mapObject: {},
        markerLayer: {}
      }
    },
 mounted () {
      const bingKey = 'foo'

      this.mapObject = L.map(
        "map", {
          center: this.center,
          zoom: this.zoom,
          minZoom: this.minZoom,
          maxZoom: this.maxZoom
        }
      )

      L.tileLayer.bing({bingMapsKey: bingKey, imagerySet: 'Road'}).addTo(this.mapObject)

    },
    beforeDestroy () {
      this.mapObject.clearAllEventListeners()
    }

  }
</script>

从“传单包装器”导入L
导出默认值{
名称：'单张地图'，
道具：['center'，'zoom'，'minZoom'，'maxZoom'，'markers']，
数据（）{
返回{
映射对象：{}，
标记层：{}
}
},
挂载（）{
const bingKey='foo'
this.mapObject=L.map(
“地图”{
中心：这个，中心，
zoom:this.zoom，
minZoom:this.minZoom，
maxZoom:this.maxZoom
}
)
bing（{bingMapsKey:bingKey，imagerySet:'Road'}）.addTo（this.mapObject）
},
在销毁之前（）{
this.mapObject.clearAllEventListeners（）
}
}

您的代码中有几个问题：

Vue中没有准备好的生命周期挂钩。使用

mounted（）

您正试图将传单库作为组件传递给Vue，但Vue不做任何操作，因为传单不是Vue组件，不需要向Vue进行任何形式的注册

Vue组件上未声明

map

数据属性

从“传单”将库作为

传单导入没有问题，但是从“传单”

将传单对象声明为

L可能会更为一致。您也可以使用：
从“传单”导入{Map}
，但必须正确初始化地图：
this.Map=newmap（“mapContainer”）

使用传单映射类上的

remove（）

方法，适当防止潜在的内存泄漏和/或清理。Vue

beforeDestroy

lifecycle钩子中有一个很好的位置

另外，不要忘记导入传单CSS，例如：

导入“传单/目录/传单.css”


导入“传单/目录/传单.css”；
从“传单”中输入L；
导出默认值{
名称：“单张地图”，
数据（）{
返回{
映射：空
};
},
安装的（）{
this.map=L.map（“mapContainer”）.setView（[51.959，-8.623]，12）；
L.tileLayer（“http://{s}.tile.osm.org/{z}/{x}/{y}.png”{
归属：
“©；贡献者”
}).addTo（此.map）；
},
在…之前{
if（this.map）{
this.map.remove（）；
}
}
};
#地图容器{
宽度：100vw；
高度：100vh；
}
您的代码中有几个问题：

Vue中没有准备好的生命周期挂钩。使用
mounted（）
您正试图将传单库作为组件传递给Vue，但Vue不做任何操作，因为传单不是Vue组件，不需要向Vue进行任何形式的注册
Vue组件上未声明
map
数据属性
从“传单”

将库作为

传单导入没有问题，但是从“传单”

将传单对象声明为

L可能会更为一致。您也可以使用：
从“传单”导入{Map}
，但必须正确初始化地图：
this.Map=newmap（“mapContainer”）
使用传单映射类上的
remove（）
方法，适当防止潜在的内存泄漏和/或清理。Vue
beforeDestroy
lifecycle钩子中有一个很好的位置
另外，不要忘记导入传单CSS，例如：
导入“传单/目录/传单.css”


导入“传单/目录/传单.css”；
从“传单”中输入L；
导出默认值{
名称：“单张地图”，
数据（）{
返回{
映射：空
};
},
安装的（）{
这个