leaflet地图鼠标移动画线

实现第一次点击确定起点，移动鼠标显示线段，二次点击确定线段，可重复循环。

<style type="text/css">
			.con {
				/* float: left; */
				overflow: hidden;
				height: 40px;
				z-index: 999;
				width: 100%;
				line-height: 40px;
			}

			.con>div {
				display: inline-block;

				margin-left: 20px;
				padding-right: 20px;
				border-right: 2px solid #1CA4E0;
			}
</style>
<div class="main">
			<div class="con">
				<div id="start">开始</div>//点击开始画线
				<div id="end">结束</div>//点击结束画线

			</div>


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

下面是具体js代码，引入leaflet和地图的粘贴显示略过

var p1, p2;//p1存放起点，p2存放终点
var line ;//line存放画的线

//第一次鼠标点击事件触发函数
function fclick(e) { //e具有latlng属性，该属性是单击发生的位置。
	p1 = e.latlng;//确定起点
	map.off('click', sclick);//关闭slick：第二次鼠标点击事件触发函数
	map.on('mousemove', mmove); //开始监听鼠标移动事件
}

//鼠标移动监听函数
function mmove(e) {
	if (map.hasLayer(line)) {//判断之前是否有画线
		map.removeLayer(line);	//清除所有线段
	}
	p2 = e.latlng;//确定线段终点
	line = new L.polyline([p1,p2], {//画线
		color: 'blue'//线段颜色
	}).addTo(map);
	map.off('click', fclick); //关闭第一次点击事件监听
	map.on('click', sclick); //开始第二次点击事件监听		
}

//第二次鼠标点击事件函数
function sclick() {
	map.off('mousemove', mmove); //关闭鼠标移动监听事件
	map.off('click', sclick); //关闭第二次点击事件监听
	map.on("click", fclick); //再次开始第一次点击事件监听，准备下次画线
}

//为div添加点击事件，jq方法
$('#start').click(function() {//开始画线
	map.on('click', fclick);//开始第一次鼠标点击事件监听
})

$('#end').click(function() { //结束画线，关闭所有
	map.off('click', fclick);
	map.off('click', sclick);
	map.off('mousemove', mmove);
	if (map.hasLayer(line)) { //清除当前折线
		map.removeLayer(line);	
	}
})