設計要求:
1,打開地圖頁面, 從自己的MYSQL數據庫讀取數據, 渲染到地圖上(多個點)
2,點擊其中一個點,生成一個自己定義的DIV(里面元素自己定義,這里不是用的label)
3,DIV里有該點 在數據庫的所有數據(能獲得推送實時數據)
initMap:function(){
var me=this;//定義全局對象
me.map = new BMap.Map("allmap", {enableMapClick:false}); //創建地圖
var point = new BMap.Point(120.61990712,31.31798737); // 創建點坐標(默認) 這里是蘇州
me.map.centerAndZoom(point, 12); //默認縮放比例 其實打開地圖的默認等級
me.map.enableScrollWheelZoom(); //啟用滾輪放大縮小
////添加控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默認縮放平移控件
me.map.addControl(top_left_control);
me.map.addControl(top_left_navigation);
me.map.enableScrollWheelZoom(); //獲取縮放等級,這里沒什么用寫着玩的;
//獲取數據data 這里從自己數據庫獲取數據 我就省略了. 編輯大概樣式()
me["data"]={
001:{name:蘇州市工業園區,id:215006,lat: 31.31529999,lon:120.78209686,point:{[id_:001001,name_:測試點1]}},
002:{name:蘇州市新區,id:215003,lat: 33.31529999,lon:120.78209686,point:{[id_:002001,name_:測試點2]}}
}
}
//大量添加markers
addMarks: function (data) {
var me=this;
for(var m in data){
me.addMark(data[m]) }
},
//單個添加marker點(包括單擊事件,DIV展開,數據渲染,marker的ID位置放置,與獲取)
addMark:function(data){
var me=this;
var label;
var point = new BMap.Point(data.lon,data.lat); //建立測試point點
var marker=new BMap.Marker(point,{icon:new BMap.Icon("../../images/dc_chg_run_24.png", new BMap.Size(24, 24))}); //在地圖上建立marker點 ,自定義圖片,托片大小
label = new BMap.Label(data.id, {offset: new BMap.Size(20, 0)}); //創建marker點的標記,這里注意下,因為百度地圖可以對label樣式做編輯,所以我這里吧重要的id放在了label(然后再隱藏)
label.setStyle( {display:"none"});//對label 樣式隱藏
marker.setLabel(label); //把label設置到maker上
marker.setTitle(data.name); //這里設置maker的title (鼠標放到marker點上,會出現它的title,所以我這里把name,放到title里)
me.map.addOverlay(marker); //把maker點添加到 地圖上
data["chargerMarker"]=marker; //這里很重要, 把maker對象放到緩存的data 里面
marker.addEventListener("click", function (e) { //這里添加maker的監聽點擊事件,觸發自定義div("#info-panel)的展示
$("#info-panel").toggle(300);//div展開,關閉
me.tag=e.target.getLabel().content; //點擊maker點后 獲取label里面的內容
$("#id").html(e.target.getLabel().content); //這里就可以獲取到marker的id
//根據me.tag 作為data的key 就能獲取緩存data對應數據,就可以渲染到 自定義div里
}
},
//圖標跟換,根據數據要求,對該marker圖標切換,閃爍
假設 id="001";當然 數據推送的時候這個ID 實時變化的
changeIcon: function (id) {
var me=this;
var myIcon;
var state=parseInt(ms.state);
switch(state){
case 0 : myIcon =new BMap.Icon("../../images/stop.png", new BMap.Size(24, 24)); break;
case 1: myIcon =new BMap.Icon("../../images/run.png", new BMap.Size(24, 24)); break;
case 2 : myIcon =new BMap.Icon("../../images/broken.png", new BMap.Size(24, 24)); break;
default :; }
me.data[id].chargerMarker.setIcon(myIcon);//改變圖標
},
PS:隨便瞎寫寫的~寫的不好,多多見諒~
