百度地图API显示多个标注点带提示的代码

下面的内容如数组都是数据库里调用后循环输出的

<script type=”text/javascript”>

var markerArr=[

{title:”xxx”,point:”114.078869,22.555521″,address:”xxx “,tel:”xxx）”},

{title:”xxx”,point:”113.90259,22.568833″,address:”xxx “,tel:”xxx）”},

{title:”xxx”,point:”114.151715,22.55261″,address:”xxx “,tel:”xxx）”},

];

function map_init() {

var map = new BMap.Map(“map_dealer”); // 创建Map实例

var point = new BMap.Point(114.025974, 22.546054); // 创建点坐标

map.centerAndZoom(point,12);// 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom(true); //启用滚轮放大缩小

//向地图中添加缩放控件

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);

var point=new Array(); //存放标注点经纬信息的数组

var marker=new Array(); //存放标注点对象的数组

var info=new Array(); //存放提示信息窗口对象的数组

for(var i=0;i<markerArr.length;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]);

marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

var label = new BMap.Label(‘公司名称：’+ markerArr[i].title ,{offset:new BMap.Size(20,-10)});

marker[i].setLabel(label);

info[i] = new BMap.InfoWindow(“<p style=’font-size:12px;lineheight:1.8em;’>名称：”+markerArr[i].title+”</br>地址：”+markerArr[i].address+”</br> 热线：”+markerArr[i].tel+”</br><img src=’//www.netpc.com.cn/wp-content/uploads/2013/07/10090833inc.gif’ /></p>”); // 创建信息窗口对象

}

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]);

});

}

function map_load() {//异步调用

var load = document.createElement(“script”);

load.src = “http://api.map.baidu.com/api?v=1.4&callback=map_init”;

document.body.appendChild(load);

}

window.onload = map_load;

</script>

<div id=”map_dealer”style=”width:100%;height:500px;background-color:navy;”></div>