# leaflet搭建vue地图组件 近期写项目需要使用地图，便看到了leaflet这款集成的地图工具，这个工具提供了很多实用的接口，对于地图的显示也可以做的非常炫酷。于是就开始接触这个框架。 leaflet的官方组件使用js写的，由于项目是vue项目，需要组件化。网上相关leaflet的vue教程都非常少，并且大部分是写于.html文件中，而不是.vue文件，所以在写成的初期还是十分的迷茫。 - **将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’; @import “~leaflet/dist/leaflet.css”;
问题：自定义图标时，坐标根据地图放大缩小会改变原本的位置
问题如下，定位点为天安门，缩小地图的zoom之后会坐标发生偏移，肉眼可看。当缩小为中国地图的时候，能从北京定位偏移到海上？？？
解决方案：坐标根据地图放大缩小会改变原本的位置，如图放到最大定位准确，缩小时就会发生偏差。在查阅了不少资料之后，确认问题出因为是单独引入的图片，图片会被识别为自定义图片，然后需要设置相关参数
//自定义图标
let greenIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
iconSize: [30, 50], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [15, 50], // point of the icon which will correspond to marker's location
shadowAnchor: [15, 64], // the same for the shadow
popupAnchor: [0, -40] // point from which the popup should open relative to the iconAnchor
});
上面两个参数分别为图片的地址，重点想要讲的是剩下五个参数：
iconSize：图片的大小，第一个参数为宽，第二个是高
shadowSize ：阴影图片的大小，参数同上
iconAnchor：最重要的一个参数。官方的解释为The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.翻译一下这个属性决定了图标尖端的坐标（尖端坐标相对于其图标左上角）,这个点如果在正确的位置，图标就会对齐。如果指定了size，则默认居中，也可以在具有负边距的CSS中设置。所以如果要居中对齐，这个点的第一个属性为iconSize第一个属性的1/2，第二个属性与iconSize第二个属性相同。
popupAnchor： 这个属性是阴影的最重要参数，功能与上一个参数一样不过是相对于阴影。第一个属性为shadowSize的第一个属性的1/2，第二个属性与shadowSize第二个属性相同
popupAnchor：弹出框的位置，第一个参数设置左右偏移，第二个参数设置上下偏移，可以根据需求更改。
效果如下
再进行缩放就不会出现问题
以上就是我这次试用leaflet踩的坑，这次使用还使用了地图切换功能（切换谷歌、高德、腾讯地图），但是没有踩坑，就没有添加了。