百度地图,mark点,获取mark的id label等

Posted 2020-07-19 小~牧

设计要求: 
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:随便瞎写写的~写的不好,多多见谅~