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