關於js的吐槽
以後寫JS的時候。
1、儘量少使用全域性變數；
2、適當封裝方法，強烈不建議上來就寫需要邏輯執行的程式碼；
3、適當使用$(document).ready()或者window.onload(不建議這種寫法)二者具體區別，可以自己查一下。
4、通常功能內部或者外掛內部具體功能是結構化程式設計，對外部採用物件程式設計。
以上四點，僅供參考。
var secondLine = []; //儲存一級地圖的陣列,需要放到一級地圖的圖層裡;
var firstLine = []; //儲存二級地圖,陣列需要放到二級地圖的圖層裡;
/*
1.建立自定義地圖例項;
*/
//var minZoom;
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return '../../Image/pagesImgs/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 1, maxZoom: 4 });
var map = new BMap.Map('map', { mapType: MyMap });
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(); //新增滑鼠滾輪操作;
map.centerAndZoom(new BMap.Point(0, 0), 1);
/*
2.自定義建構函式(座標點,div模組內容,彈窗內容;練習題超連結,zoom所表示檢視圖層zlayer,圖片的連結,學習進度1);
*/
function ComplexCustomOverlay(point, text, mouseoverText, href, zlayer, xxjd) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
this._href = href;
this._zlayer = zlayer;
this._xxjd = xxjd;
}
ComplexCustomOverlay.prototype = new BMap.Overlay(); //繼承Overlay介面;
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map; //初始化地圖;
/*
3新增監聽事件,通過zoomend事件控制一級地圖和二級地圖各縮放級別預設顯示要求和彈窗事件;
*/
map.addEventListener("zoomend", function () {
var zoom = map.getZoom(); //獲取縮放級別;
if (zoom == 1) { //預設縮放級別1時,class為1的div顯示,class為2和3的div隱藏;
$(".1").show();
$(".2").hide();
$(".3").hide();
removePolylineByColor("#1C86EE", map);
} else if (zoom == 2) { //預設縮放級別2時,class為1和3的div顯示,class為2的div隱藏;
$(".1").show();
$(".3").show();
$(".2").hide();
createLine(secondLine, map);
} else if (zoom == 3) { //預設縮放級別4-5時,class為2的div顯示,class為1和3的div隱藏;
$(".1").hide();
$(".2").show();
$(".3").hide();
div.onmouseover = function () { //預設縮放級別在3時,可通過滑鼠事件控制彈窗功能;
this.getElementsByTagName("span")[0].innerHTML = that._overText;
}
div.onmouseout = function () {
this.getElementsByTagName("span")[0].innerHTML = "";
}
} else { //預設縮放級別4-5時,class為2的div顯示,class為1和3的div隱藏;
$(".1").hide();
$(".2").show();
$(".3").hide();
}
});
//建立div盒子模型,相當於地圖的marker.根據一級地圖和二級地圖判斷是否顯示;
var div = this._div = document.createElement("div");
div.setAttribute("id", "marker");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.color = "white";
div.style.height = "85px";
div.style.width = "65px";
div.style.padding = "0px";
div.style.lineHeight = "20px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px";
div.setAttribute("class", this._zlayer);
if (this._zlayer == 2) {
div.style.display = "none";
} else if (this._zlayer == 3) {
div.style.display = "none";
}
var span = this._span = document.createElement("span");
div.appendChild(span);
div.appendChild(document.createTextNode(""));
var that = this;
var a = this._a = document.createElement("a");
a.setAttribute("class", "nodeLabel exercise");
a.setAttribute("rel", "popover");
a.setAttribute("data_id", "angle_rotation");
a.setAttribute("href", this._href);
div.appendChild(a);
//新增顯示一級地圖學習進度的小星星的圖片,判斷這個圖片只在一級地圖顯示,二級地圖隱藏,然後通過學習的進度等級判斷,給不同的圖片;
//<a href="FrmStuExercise.aspx">FrmStuExercise.aspx</a>
var divStar = this._divStar = document.createElement("div");
divStar.style.position = "absolute";
divStar.style.width = "65px";
divStar.style.height = "20px";
divStar.style.top = "-20px";
divStar.style.left = "-32px";
divStar.style.overflow = "hidden";
a.appendChild(divStar);
/*
預設情況下:直接進入縮放級別為1的一級地圖的,小星星會根據後臺資料判斷給到不同的小星星圖;
二級地圖判斷為餅圖;
*/
if (this._xxjd == 0 && type == 1) {
divStar.style.background = "url(../../Image/pagesImgs/yijistar1.png) no-repeat 0px 0px";
} else if (this._xxjd == 1 && type == 1) {
divStar.style.background = "url(../../Image/pagesImgs/yijistar2.png) no-repeat 0px 0px";
} else if (this._xxjd == 2 && type == 1) {
divStar.style.background = "url(../../Image/pagesImgs/yijistar3.png) no-repeat 0px 0px";
} else if (this._xxjd == 3 && type == 1) {
divStar.style.background = "url(../../Image/pagesImgs/yijistar4.png) no-repeat 0px 0px";
} else if (this._xxjd == 4 && type == 1) {
divStar.style.background = "url(../../Image/pagesImgs/yijistar5.png) no-repeat 0px 0px";
} else { }
var divNode = this._divNode = document.createElement("div");
divNode.setAttribute("id", "nodeText");
divNode.setAttribute("class", "nodeLabel");
divNode.style.color = "white";
divNode.style.position = "absolute";
divNode.style.width = "65px";
divNode.style.height = "20px";
divNode.style.top = "42px";
divNode.style.left = "-31px";
divNode.style.overflow = "hidden";
divNode.appendChild(document.createTextNode(this._text));
a.appendChild(divNode);
map.getPanes().labelPane.appendChild(div);
var divIcon = this._divIcon = document.createElement("div");
divIcon.setAttribute("id", "icon");
divIcon.setAttribute("class", "location");
divIcon.style.position = "absolute";
divIcon.style.width = "40px";
divIcon.style.height = "40px";
divIcon.style.top = "3px";
divIcon.style.left = "-20px";
divIcon.style.overflow = "hidden";
a.appendChild(divIcon);
/*
二級地圖學習進度實現邏輯:考慮到縮放級別為2時,二級地圖知識點小圖也隨著變化;
1.type==2
type==3
this._xxjd==1
*/
//zlayer級別為二級知識點縮放為2級的時候點數的小圖的標識;
if (type == 1) {
divIcon.style.background = "url(../../Image/pagesImgs/yuan2.png) no-repeat 0px 0px";
}
if (this._zlayer == 3) {
divIcon.style.background = "url(../../Image/pagesImgs/30_4.png) no-repeat 0px 0px";
} else if (type == 2 && this._xxjd == 1) {
divIcon.style.background = "url(../../Image/pagesImgs/yuan1.png) no-repeat 0px 0px";
} else if (type == 2 && this._xxjd == 2) {
divIcon.style.background = "url(../../Image/pagesImgs/yuan2.png) no-repeat 0px 0px";
} else if (type == 2 && this._xxjd == 3) {
divIcon.style.background = "url(../../Image/pagesImgs/yuan3.png) no-repeat 0px 0px";
} else if (type == 2 && this._xxjd == 4) {
divIcon.style.background = "url(../../Image/pagesImgs/yuan4.png) no-repeat 0px 0px";
} else { }
return div; //初始化div盒子;
}
//在地圖上繪製div盒子方法;
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x + "px";
this._div.style.top = pixel.y - 20 + "px";
}
//定義資訊視窗
function createInfoWindow(i) {
var json = markerArr[i]
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p
style=\"padding-top:8px;\"><hr></p><div class='iw_poi_content'>" + json.content + "</div>");
return iw;
}
//定義marker陣列
var markerArr;
var gradeId = GetQueryString("gradeId");
var subjectId = GetQueryString("subjectId");
$(document).ready(GetPoint);
function GetPoint() {
var url = "../../Handler/HStudent/HGetMapKnlg.ashx";
var datas = { type: "allMap", xd: 3, SubjectId: subjectId, GradeId: gradeId, t: new Date().getMilliseconds() };
$.getJSON(url, datas, function (data) {
if (data != null && data != undefined && data != "-1") {
// alert(data);
markerArr = data;
//遍歷Json陣列資料,生成div中的內容;
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var text = json.text;
var href = json.href;
var content;
if (json.type == 2) {
content = '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>'
+ json.text + '</strong></span><br>';
// content = json.content;
href = "FrmStuExercise.aspx?knlgId=" + json.id + "&t=" + new Date().getMilliseconds();
} else {
content = "";
href = "";
}
var pintx = json.point.split('|')[0];
var pinty = json.point.split('|')[1];
var type = json.type;
var xxjd = json.xxjd;
if (type == 1) {//在縮放級別為1時,將座標點陣列新增到一級地圖生成折線;
firstLine.push(new BMap.Point(pintx, pinty));
} else {
secondLine.push(new BMap.Point(pintx, pinty)); //secondLine為二級地圖的座標點陣列;
}
map.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), text, content, href, type, xxjd));
(function () {
var index = i;
var _iw = createInfoWindow(i);
})()
}
//-------------載入
// markerArr = data;
} else {
alert("該模組暫無知識點地圖，後期將會新增");
}
});
};
// markerArr = [
// { text: "加法與減法", content: "", href: "", point: '120.000|80.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 1, xxjd: 2
// }
// , { text: "乘法與除法", content: "", href: "", point: '120.000|-60.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 1, xxjd: 1
// }
// , { text: "四則運算", content: "", href: "", point: '40.000|20.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 1, xxjd: 3
// }
// , { text: "負數與絕對值", content: "", href: "", point: '-60.000|20.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 1, xxjd: 4
// }
// , { text: "小數", content: "", href: "", point: '-120.000|-80.000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 1, xxjd: 5
// }
// , { text: "加法", content: '加法',
// href: "https://www.baidu.com",
// point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 2, xxjd: 1
// }
// , { text: "減法", content: '減法',
// href: "https://www.baidu.com",
// point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 2, xxjd: 2
// }
// , { text: "位數加法的測試", content: '加法與減法',
// href: "http://www.baidu.com",
// point: '120.000000|80.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 2, xxjd: 3
// }
// , { text: "二位數加法", content: '乘法與除法',
// href: "https://www.qq.com",
// point: '120.000000|-60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 2, xxjd: 4
// }
// , { text: "四則運算的規範", content: '四則運算',
// href: "http://www.alibaba.com",
// point: '40.000000|20.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 2, xxjd: 4
// }
// // , { text: "加法", content: '<div style="position:absolute; zindex=1; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span
style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>加法</strong></span><br>',
// // href: "https://www.baidu.com",
// // point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// // type: 2, xxjd: 1
// // }
// // , { text: "減法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style="
position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>減法</strong></span><br>',
// // href: "https://www.baidu.com",
// // point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// // type: 2, xxjd: 2
// // }
// // , { text: "1位數加法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style="
position:absolute;margin:0px 20px;line-height:20px;display:inlin-block;"><strong>加法與減法</strong></span><br>',
// // href: "http://www.baidu.com",
// // point: '120.000000|80.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// // type: 2, xxjd: 3
// // }
// // , { text: "二位數加法", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style="
position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>乘法與除法</strong></span><br>',
// // href: "https://www.qq.com",
// // point: '120.000000|-60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// // type: 2, xxjd: 4
// // }
// // , { text: "四則運算的規範", content: '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style="
position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>四則運算</strong></span><br>',
// // href: "http://www.alibaba.com",
// // point: '40.000000|20.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// // type: 2, xxjd: 4
// // }
// , { text: "", content: "", href: " ",
// point: '90.000000|90.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 3
// }
// , { text: "", content: "", href: "",
// point: '90.000000|60.000000', isOpen: 0, icon: { w: 40, h: 40, l: 0, t: 0, x: 6, lb: 5 },
// type: 3
// }
// ]
//遍歷Json陣列資料,生成div中的內容;
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var text = json.text;
var href = json.href;
var content;
if (json.type == 2) {
content = '<div style="position:absolute; float:center; margin:0px 0px 70px 60px;width:110px;height:80px; background:white; color:black;"><p>開始練習:</p><br><span style=" position:absolute;margin:0px 25px 10px 40px;line-height:20px;display:inlin-block;"><strong>'
+ json.text + '</strong></span><br>';
// content = json.content;
href = "FrmStuExercise.aspx?knlgId=" + json.id + "&t=" + new Date().getMilliseconds();
} else {
content = "";
href = "";
}
var pintx = json.point.split('|')[0];
var pinty = json.point.split('|')[1];
var type = json.type;
var xxjd = json.xxjd;
if (type == 1) {//在縮放級別為1時,將座標點陣列新增到一級地圖生成折線;
firstLine.push(new BMap.Point(pintx, pinty));
} else {
secondLine.push(new BMap.Point(pintx, pinty)); //secondLine為二級地圖的座標點陣列;
}
map.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), text, content, href, type, xxjd));
(function () {
var index = i;
var _iw = createInfoWindow(i);
})()
}
//新增折線
var polyline = new BMap.Polyline(firstLine, { strokeColor: "#1E90FF", strokeWeight: 1,
strokeOpacity: 0.5, enableMassClear: true
});
map.addOverlay(polyline); //增加折線
myCompOverlay.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point);
});
/*
為圖層進行連線
array:儲存連線的座標點Point物件
map:地圖類
*/
function createLine(array, map) {
var polyline = new BMap.Polyline(secondLine, { strokeColor: "#1C86EE", strokeWeight: 1,
strokeOpacity: 0.5, class: 2
}); //建立折線
map.addOverlay(polyline); //增加折線
}
/*
刪除指定顏色的圖層連線
color:刪除圖層連線的顏色
map:地圖類
*/
function removePolylineByColor(color, map) {
var allOverlays = map.getOverlays();
for (var i = 0; i < allOverlays.length; i++) {
var lineColor = allOverlays[i].getStrokeColor();
if (lineColor == color) {
map.removeOverlay(allOverlays[i]);
}
}
}
這段程式碼實現的是百度地圖。自建瓦片、自己取點。可能百度地圖的呼叫方式有些奇葩。但是，不應該是這樣的程式碼。。。。
相關文章
- 介面設計的理念分歧: 關於iOS 7的思考和吐槽iOS
- babel吐槽Babel
- oidc-client.js踩坑吐槽貼clientJS
- 吐槽visdom
- 功能測試吐槽
- 吐槽各大題庫的優劣
- [吐槽] 光Google是不夠的Go
- 吐槽：Docker真的好嗎？Docker
- 奧巴馬吐槽川普“笨蛋”的視訊火了，這又得“歸功”於AIAI
- go語言的一些吐槽Go
- 吐槽微信對開發者的"流氓"行為
- 對“主資料”的一點吐槽
- 吐槽下mac的印表機設定Mac
- 那些被吐槽最多的程式語言
- 吐槽前端元件化的踩坑之路前端元件化
- 程式猿找工作吐槽分享
- 關於分割槽表的操作
- Docker再遇公關危機，GitHub開發者吐槽Docker下載限制DockerGithub
- 吐槽橫行的面試題分享環境面試題
- 吐槽一下Xcode中的PlaygroundXCode
- 對幾本書名翻譯的吐槽
- 吐槽“技術債務” - morethancoding
- 吐槽: 移動端快取策略快取
- Javascript之旅——第九站：吐槽functionJavaScriptFunction
- 後臺程式碼 拼接table吐槽
- 關於分割槽表的move操作
- 關於SQL Server的分割槽表SQLServer
- oracle關於分割槽相關操作Oracle
- Flutter 吐槽下BottomNavigationBarItem的問題.FlutterNavigation
- 3.15 資料庫吐槽大會資料庫
- SqlServer關於分割槽表的總結SQLServer
- 關於分割槽表的概念及操作
- js關於this的疑惑JS
- 對一些詞句翻譯的吐槽（1）
- 對一些詞句翻譯的吐槽（2）
- 吐槽程式設計問題的五張漫畫程式設計
- 吐槽Javascript系列一：slice()、substr()和 substring()JavaScript
- 假如易立競吐槽程式設計師。。。程式設計師