關于百度地圖海量打點的問題

作為今年7月份剛畢業的萌新，經過一系列糾結后，我最終還是選擇了程序員這條脫發路，對了，既然說到這，我得去看看我的生姜洗發水到了沒。
和我的很多同學一樣的是，我畢業后并沒有去找工作，而是留在了大四實習的公司。目前做前端開發，其實我本來是做后臺的，前幾天前端的小姐姐離職了，我就先頂著了，待遇不能說好，但也不算很差，朝九晚六，雙休，總體來說還挺輕松。
唯一讓我目前感到惆悵的是，前端的東西我就懂一些JS，很多前端的框架都沒接觸過，不知道到底從何下手，包括我現在寫前端代碼的軟件還是eclipse。
有沒有大牛告訴我一個準確的方向啊。

下面就說說我遇到的第一個我感覺比較有紀念意義的問題吧。

需求

---

公司最近給了我一個需求，讓我在百度地圖上展示大概幾千左右的點，每個點除了經緯度外還有一些其他參數，要根據點中某個參數，渲染不同的顏色，單擊相應的點，彈出其相應的信息，并根據該點的時間戳，和其他的幾個表進行聯動。

---

思路

我首先想到了百度地圖api中海量點，API示例鏈接如下：http://lbsyun.baidu.com/jsdemo.htm#c1_19
于是我就稍加整理，完成了這個需求，作為一個入行兩個月萌新，我的代碼很亂，希望各位大佬多多指點。

代碼

這里我就展示我的海量點實現過程吧

var seaPoints1=[];var seaPoints2=[];var seaPoints3=[];var seaPoints4=[];var seaPoints5=[];var seaPoints6=[];var seaPoints7=[];var seaPoints8=[];for (var i = 0; i < mapData.length; i++) {//mapData是我從后臺拿到的數據if (document.createElement('canvas').getContext) { // 判斷當前瀏覽器是否支持繪制海量點if(mapData[i].rsrp <= -110){seaPoints1.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-110<mapData[i].rsrp && mapData[i].rsrp<= -105){seaPoints2.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-105<mapData[i].rsrp && mapData[i].rsrp<= -100){seaPoints3.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-100<mapData[i].rsrp && mapData[i].rsrp<= -95){seaPoints4.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-95<mapData[i].rsrp && mapData[i].rsrp<= -85){seaPoints5.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-85<mapData[i].rsrp && mapData[i].rsrp<= -70){seaPoints6.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-70<mapData[i].rsrp && mapData[i].rsrp<= -50){seaPoints7.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}else if(-50<mapData[i].rsrp){seaPoints8.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])}}else {alert('請在chrome、safari、IE8+以上瀏覽器查看本示例');}}if(seaPoints1.length != 0){dadian('#ff0000',seaPoints1);seaPoints1=[];}if(seaPoints2.length != 0){dadian('#ff00ff',seaPoints2);seaPoints2=[];}if(seaPoints3 != 0){dadian('#ffff00',seaPoints3);seaPoints3=[];}if(seaPoints4 != 0){dadian('#00ffff',seaPoints4);seaPoints4=[];}if(seaPoints5 != 0){dadian('#0101fe',seaPoints5);seaPoints5=[];}if(seaPoints6 != 0){dadian('#30fe30',seaPoints6);seaPoints6=[];}if(seaPoints7 != 0){dadian('#009600',seaPoints7);seaPoints7=[];}if(seaPoints8 != 0){dadian('cornflowerblue',seaPoints8);seaPoints8=[];}//海量點 全部顯示：function dadian(color,point) { var points = []; // 添加海量點數據for(var i=0;i<point.length;i++){points.push(new BMap.Point(point[i][0], point[i][1]));}// points.push(new BMap.Point(lng, lat)); var options = {size: BMAP_POINT_SIZE_SMALL,shape:3,color:color}var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollectionpointCollection.addEventListener('click', function (e) {var Time0; for(var i=0;i<point.length;i++){if(point[i][0]==e.point.lng && point[i][1]==e.point.lat){alert('經緯度:（' + e.point.lng + ',' + e.point.lat+'）\n'+'rsrp：'+point[i][2]); // 監聽點擊事件Time0 = show()+point[i][3];var getTime = new Date(Time0).getTime(); //點中的時間轉化為時間戳liandong(getTime); //調用聯動函數 }}});map.addOverlay(pointCollection); // 添加OverlaypointCollection.disableMassClear();//不能被清除}

這里我寫了大量的判斷，設置了很多的變量，總感覺這個代碼很別扭，希望有大牛能給我一個更好的方案。

總結

最近老大又對我提了一個需求，和這個的需求差不多，是要在百度地圖上展示數十萬級的點，根據每個點的rsrp以及sinr的不同，展示不同的顏色，不同的是，十萬級的點不用進行聯動。作為萌新的我，還好運氣比較好，完成了這個需求，那就下一篇再發吧。

總結

以上是生活随笔為你收集整理的关于百度地图海量打点的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。