1,第一步当然是建立百度地图放置的容器嘛,这个不解释
2,地图旁增加一排文字,把标注点的信息一个一个都列出来,这个以后要用于和地图上的标注连接起来的,在这边点击一下,地图那边标注相应的点就弹出提示信息了,样式就是如下
这个东西不要手工写,最好用php把数组循环出来写进去,这个数组就是你要标注的点的所有信息啊,比如名字,电话,标注点的经纬度,数据库的id号等等,因为后面在javascript中也要用到这个php的数组,保持顺序一致是很重要的,不要问我这个数组哪里来,这个问自己...,我这边的是这样写的,$areashoplist就是准备好的数组,$key是数组中元素的顺序,写在这里便于以后分辨连接.
foreach($areashoplist as $key=>$rs){
?>
}
?>
3,下来就可以去页面的下面写javascript代码了,首先要把php后台给你的数组$areashoplist变成javascript的数组,这个很简单嘛,就是循环嘛,按着格式循环出来就行了.
var markerArr=[echo "{title:\"".$map['company']."\",content:\"".$map['address']."\",point:\"".$map['mappoint']."\",isOpen:0,tel:\"".$map['tel']."\"},";
}
?>
]
最后循环后的样式应该是这个样子就对了:
var markerArr=[
{title:"陕西华岳汽车",content:"西安市西三环与富鱼路十字西南角",point:"108.872982,34.2581",isOpen:0,tel:""},
{title:"陕西福海达汽车销售服务有限公司",content:"西安市西三环外阿房一路西段95号 ",point:"",isOpen:0,tel:"029-84253121"},
]
4,准备工作做完了,下来开始做地图吧,前面几步都是一样的,城市中心点哪里,我是根据ip在数据库里查出的城市名,分配下来的,这样保证中心点一直在城市中心
//开始写地图基本信息
var map = new BMap.Map("container2");
//var pp =new BMap.Point("西安"); // 定义一个中心点坐标
map.centerAndZoom("",12); // 初始化地图,设置中心点坐标和地图级别。10为市级,这里的中心点用php写入"西安",这里不能加市字
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); //定义向地图中添加缩放控件
map.addControl(ctrl_nav); //向地图中添加缩放控件
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
5,地图准备工作做完了,下来要做就是添加标注点了,上面准备的那个数组就可以哪来用了,这里另外还准备了几个数组,用来存放标注点和提示信息窗口
var point=new Array(); //存放标注点经纬信息的数组
var marker=new Array(); //存放标注点对象的数组
var info=new Array(); //存放提示信息窗口对象的数组
for(var i=0;i
p0 = markerArr[i].point.split(",")[0]; //
p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new BMap.Point(p0,p1); //循环生成新的地图点
marker[i]=new BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]); //在地图上循环添加标记
info[i]=new BMap.InfoWindow("" + markerArr[i].title + ""+markerArr[i].content+"
销售热线:"+markerArr[i].tel+"
");
//生成提示信息窗口,并将窗口对象按顺序存入数组中
}
好了现在标注点,提示信息都按顺序存入数组了,提示点在地图上也已经显示出来了
6,下来就该把提示信息和相关的标注点绑定起来了,还是按循环一个一个的取,因为两个数组的顺序都是一样的,所以配对就好配对了
for($i=0;$i?>
marker[].addEventListener("mouseover", function(){this.openInfoWindow(info[]);});
}
?>
最后的结果就是有多少个标注点,绑定多少次,数组的下标已经固定了,不存在i值变化的情况,就绕开了开头提的那个闭包问题,在html下显示应该是这样的:
marker[0].addEventListener("mouseover", function(){this.openInfoWindow(info[0]);});
marker[1].addEventListener("mouseover", function(){this.openInfoWindow(info[1]);});
marker[2].addEventListener("mouseover", function(){this.openInfoWindow(info[2]);});
marker[3].addEventListener("mouseover", function(){this.openInfoWindow(info[3]);});
.........................................
7,下来该给外面的超链接绑定地图上标注点的显示了;有了上面的提示信息窗口数组,用jquery绑定一个事件当然就很简单了
for($i=0;$i if(is_null($areashoplist[$i]['mappoint'])){ //如果mappoint没有设置则跳过本次循环,执行下一个循环
continue;
}
?>
$('#list').live('mouseover',function(){
map.openInfoWindow(info[],point[]); //将信息提示窗口的显示按顺序绑定给外部的链接文字
return false;
});
} //循环结束
?>
