vue+leaflet添加marker图标

在这里将会演示在vue项目中使用leaflet地图添加单个marker图标，多个marker图标的多个实现方案，若想了解如何在vue项目中引入leaflet请看上一节

1. 添加单个marker图标

1.1 Icon

let marker = this.$L.marker([lat, lng], {
	icon: this.$L.icon({
		iconUrl: iconUrl,// 路径
		iconSize: iconSize,// 大小
		opacity: opacity,// marker透明度
		iconAnchor: [0, 0],// icon图标点位置偏移
		popupAnchor: [5, 0]// 点击默认弹出框位置偏移[x, y],x一般为iconSize的二分之一，弹窗可位于图标点中间的位置
	})
})
// 将marker添加到地图中
marker.addTo(map)

1.2 divIcon

this.$L.divIcon({
	html: `<div>文本内容${name}</div>`,
	className: 'className',
	iconSize: this.$L.point(80, 30)
})

2. 添加多个marker图标

可通过循环数组的方式将marker图标添加到一个图层组中，再将图层组添加到map中，方便后续对该图层组的添加删除操作

let layerGroup = this.$L.layerGroup();// 图层组
// 将marker的定义封装为一个函数
let addMarker = (item) => {
	// 若出现不同数据图标样式不同的情况，可在该函数中进行判断定义不同的iconUrl
	return this.$L.marker([item.lat, item.lng], {
		icon: this.$L.icon({
			iconUrl: iconUrl,// 路径
			iconSize: iconSize,// 大小
			opacity: opacity,// marker透明度
			iconAnchor: [0, 0],// icon图标点位置偏移
			popupAnchor: [5, 0]// 点击默认弹出框位置偏移[x, y],x一般为iconSize的二分之一，弹窗可位于图标点中间的位置
		})
	})
}
// data为数据组
data.forEach(item => {
	layerGroup.addLayer(addMarker(item))
})
// 将marker图层组添加到map中
layerGroup.addTo(this.map)

3. marker事件及自定义弹窗

以实现鼠标移入显示弹窗，移出弹窗消失举例

marker.on('mouseover', () => {
	// 移入marker开启弹窗
	// bindPopup第一个参数是dom，第二个参数可定义class名，方面调整它的样式
	marker.bindPopup(`<div>${变量}</div>`, { className: 'class' }).openPopup();
})

marker.on('mouseout', () => {
	// 移出marker关闭弹窗
	marker.closePopup();
})

marker.on('click', () => {// 点击事件})

下一节 vue+leaflet添加海量点图标