leaflet搭建vue地图组件

leaflet搭建vue地图组件

近期写项目需要使用地图，便看到了leaflet这款集成的地图工具，这个工具提供了很多实用的接口，对于地图的显示也可以做的非常炫酷。于是就开始接触这个框架。
leaflet的官方组件使用js写的，由于项目是vue项目，需要组件化。网上相关leaflet的vue教程都非常少，并且大部分是写于.html文件中，而不是.vue文件，所以在写成的初期还是十分的迷茫。
在项目的初期准备使用外国大兄弟写的VUE2leaflet，但是基于安全的因素弃用了这种方法。

• 将leaflet通过vue的组件显示，出现vue加载瓦片不全，marker图片无法显示的问题
• 坐标根据地图放大缩小会改变原本的位置

---

问题：将leaflet通过vue的组件显示，出现vue加载瓦片不全，marker图片无法显示的问题

浏览器的报错为无法找到marker的png，网上搜索这个原因一般是没有引入css造成的。但从代码上看，是又确确实实已经引入了相应的css和js。

查看css的代码我们可以发现图片的引入是从css引入的，这样的引入在html 工程（包括用html写的vue工程）中并没有问题，但是在vue单组件应用中这样会导致引入图片失败。

/* Default icon URLs */
.leaflet-default-icon-path {
   background-image: url(images/marker-icon.png);
   }

①尝试在入口文件 index.tpl（index.html）添加css的引用，失败。

②尝试在style 手动加载css，失败

解决方法：

在头部单独引入图片，在style单独引入样式。但是这样又会出现新的问题
图片会被识别为自定义图片，即出现位置偏差问题。（下面有解决方案）

import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';