總結下使用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中存在語法錯誤,常見的錯誤例如 {}不成對問題;
先記錄這些內容,後續會補充