关于leaflet开源库的学习

总结下使用leaflet这个地图相关的JS开源库

博主是JS小白，因为项目需要使用openstreetmap 这个第三方的开源地图所以就开始学习这个leaflet这个开源的JS库来配合使用地图；

下面总结下我使用过程中踩的一些坑：

知识点1：marker的使用参考API：https://leafletjs.com/reference-1.5.0.html#marker

var marker = L.marker([22.5589648, 113.9451072],
        { draggable: false, title: 'Text', opacity: 1 })   //marker的属性 参数包括：是否能拖动 标题 透明度
        .addTo(mymap)			//增加到地图上
        .bindTooltip('ssss', { permanent:true})		//设置附加的文本信息 参数包括：文本，包含的属性信息
        .bindPopup(g_htmlfile);//'<br>姓名:JamesWu<br/>'

marker这个功能在地图上应用和频繁；包括marker的一些展示信息，点击后显示的内容，以及本身的一些属性；这个在上面的例子都有提到

知识点2：在地图上点击这个marker 用一个什么方法（除了知识点1中的方法）

//添加一个标记 标记的点击事件
    //var marker1 = L.marker([51.5, -0.097]).addTo(mymap);
    //marker1.on({'click': OnClickTest});

知识点3：在使用div 包含id设置相应的属性的时候一定要保持 id = xxx 和是style中的名称要一致

<style>
			body { margin:0; padding:0; }
			#map { position:absolute; top:0; bottom:0; width:100%; }
			</style>
		 <div id="map"/>

如果对应不一致，会出现地图显示不出来的问题（这个问题踩坑的时候很痛苦，JS基础好的同学略过）

知识点4：在web上调试JS代码的时候未生效

原因：及时清理浏览器缓存 ctrl + R

知识点5：JS中的replace用法

var str="Visit Microsoft!"
	document.write(str.replace(/Microsoft/, "W3School"))
var strTest = 'fasdf,asdfsaf,sadfsadf,sdfsdfd,sdfsdf,sdfdf,sdf'; 将字符串中的","替换成""(空)
	   var strResult = strTest.replace(/,/ , ''); //这种方法 只能替换掉第一个","
	   var strResult = strTest.replace(/,/g , ''); //这种方法 可以替换掉字符串中所有的","号

这里replace的用法还有很多种，这里用到了替换单个字符串的用法；

知识点6：JS中的window.parent.xxxx() 是做什么用的

这个是调用父页面的方法

在JS中发现了一种新的解析Json的方法

例子：
pointJson 格式如上所示传递过来的参数为一个字符串类型的格式解析成对象的格式获取

var points = [];
var t = eval(pointJson);

for(var i=0; i<t.length;i++){
    var point = t[i];
    points.push([point.lat, point.lng]);
}

使用数组里面的值：point.lat 可以获取到第几个数组元素的纬度

关于一些数据结果方面的总结：JS中的[]类似C++中的数组个人感觉很像；不同的是JS可以包含任何类型的数据，这个就太棒了

在使用click 收集到的点的坐标push到容器内时，取出数值时遇到的问题
例子：
var points = [];
points.push([e.latlng.lat, e.latlng.lng]);
取得坐标
pos = 0;
var point = points[pos];   //取第0个位置的坐标
var lat = point[0];   //获取该元素的 lat 纬度
var lng = point[1];   //获取该元素的 lng 经度

JS中需要注意的错误：

JS 常见错误：
Uncaught SyntaxError: Unexpected token this
这个是因为在JS中存在语法错误，常见的错误例如 {}不成对问题;

先记录这些内容，后续会补充

关于leaflet开源库的学习

猜你喜欢