与
ESC
输入关键词搜索文章

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

全文约 254 字预计阅读 1 分钟
下面的内容如数组都是数据库里调用后循环输出的 <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/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>
百度地图API显示多个标注点带提示的代码
分享

发表评论

评论 0 条

暂无评论,来说点什么吧。