总结下使用leaflet这个地图相关的JS开源库
博主是JS小白,因为项目需要使用openstreetmap 这个第三方的开源地图 所以就开始学习这个leaflet这个开源的JS库来配合使用地图;
leaflet官网:https://leafletjs.com/
下面总结下我使用过程中踩的一些坑:
知识点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中存在语法错误,常见的错误例如 {}不成对问题;
先记录这些内容,后续会补充