關於leaflet開源庫的學習

總結下使用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中存在語法錯誤,常見的錯誤例如 {}不成對問題;

 

先記錄這些內容,後續會補充

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章