如何实现地图上显示多个自定义内容不一样的标注
瞎子
8.872982,3
4.2581",isOpen:0,tel:""}, {title:"陕西福海达汽车销售服务有限公司",content:"西安市西三环外阿房一路西段95号 ",nt:"",isOpen:0,tel:"029-84253121"}, ] 4,准备工作做完了,下来开始做地图吧,前面几步都是一样的,城市中心点哪里,我是根据ip在数据库里查出的城市名,分配下来的,这样保证中心点一直在城市中心//开始写地图基本信息var map = new BMap.Map("container2");//var pp =new BMap.Point("西安"); // 定义一个中心点坐标map.centerAndZoom("<?php echo $cityname ?>",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 nt=new Array(); //存放标注点经纬信息的数组var marker=new Array(); //存放标注点对象的数组var info=new Array(); //存放提示信息窗口对象的数组for(var i=0;i<markerArr.length;i++){ p0 = markerArr[i].nt.split(",")[0]; // p1 = markerArr[i].nt.split(",")[1]; //按照原数组的nt格式将地图点坐标的经纬度分别提出来 nt[i] = new BMap.Point(p0,p1); //循环生成新的地图点 marker[i]=new BMap.Marker(nt[i]); //按照地图点坐标生成标记 map.addOverlay(marker[i]); //在地图上循环添加标记 info[i]=new BMap.InfoWindow("<b class='iw__title' title='" + markerArr[i].title + "'>" + markerArr[i].title + "</b><div class='iw__content'>"+markerArr[i].content+"</div><div class='iw__content'>销售热线:"+markerArr[i].tel+"</div>");//生成提示信息窗口,并将窗口对象按顺序存入数组中}好了现在标注点,提示信息都按顺序存入数组了,提示点在地图上也已经显示出来了 6,下来就该把提示信息和相关的标注点绑定起来了,还是按循环一个一个的取,因为两个数组的顺序都是一样的,所以配对就好配对了<?phpfor($i=0;$i<count($areashoplist);$i++){?> marker[<?php echo $i;?>].addEventListener("mouseover", function(){this.openInfoWindow(info[<?php echo $i;?>]);});<?php} ?>最后的结果就是有多少个标注点,绑定多少次,数组的下标已经固定了,不存在i值变化的情况,就绕开了开头提的那个闭包问题,在下显示应该是这样的: 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绑定一个当然就很简单了<?phpfor($i=0;$i<count($areashoplist);$i++){ if(is_null($areashoplist[$i]['mapnt'])){ //如果mapnt没有设置则跳过本次循环,执行下一个循环 continue; }?> $('#list<?php echo $i;?>').live('mouseover',function(){ map.openInfoWindow(info[<?php echo $i;?>],nt[<?php echo $i;?>]); //将信息提示窗口的显示按顺序绑定给外部的链接文字 return false; }); <?php } //循环结束?>
2021-09-23 17:28:53 911查看 1回答
2021-09-23 17:29:01 1039查看 1回答
2021-09-23 17:30:22 291查看 2回答
2021-09-23 17:32:27 270查看 1回答
2021-09-23 17:32:27 342查看 1回答
2021-09-23 17:34:30 780查看 2回答