全国 切换城市 领事地图标注商户店铺定位可将商户企业名称和地址标注在各大网络地图数据中,地图标注店铺位置新增、认领、删除、修改等服务均可办理!
领事地图标注客服

如何实现地图上显示多个自定义内容不一样的标注

瞎子

瞎子

1,第一步当然是建立地图放置的容器嘛,这个不解释<div class="s_r" style="float:left;width:680px;height:620px;margin-top:10px " id="container2"></div> 2,地图旁增加一排文字,把标注点的信息一个一个都列出来,这个以后要用于和地图上的标注连接起来的,在这边点击一下,地图那边标注相应的点就弹出提示信息了,样式就是如下<ul><u class="name"><a href="" target="_blank"id="list0">标注点1</a></u><li >简介1</li><uclass="name"><a href="" target="_blank"id="list1">标注点2</a></u><li >简介2</li></ul>这个东西不要手工写,最好用php把数组循环出来写进去,这个数组就是你要标注的点的所有信息啊,比如名字,电话,标注点的经纬度,数据库的id号等等,因为后面在javascript中也要用到这个php的数组,保持顺序一致是很重要的,不要问我这个数组哪里来,这个问自己...,我这边的是这样写的,$areashoplist就是准备好的数组,$是数组中元素的顺序,写在这里便于以后分辨连接.<?phpforeach($areashoplist as $=>$rs){?><ul> <u class="name"> <a href="<?php echo W_BASE_URL;?>dealers/<?php echo $rs["id"]?>/" target="_blank" id="list<?php echo $ ?>"><?php echo $rs['company']?> </a> </u> <li ><?php echo $rs['address']?></li> <li>销售热线:<?php echo $rs['tel']?></li></ul><?php}?> 3,下来就可以去页面的下面写javascript代码了,首先要把php后台给你的数组$areashoplist变成javascript的数组,这个很简单嘛,就是循环嘛,按着格式循环出来就行了.var markerArr=[<?php foreach($areashoplist as $map){echo "{title:\"".$map['company']."\",content:\"".$map['address']."\",nt:\"".$map['mapnt']."\",isOpen:0,tel:\"".$map['tel']."\"},"; } ?> ]最后循环后的样式应该是这个样子就对了:  var markerArr=[  {title:"陕西华岳汽车",content:"西安市西三环与富鱼路十字西南角",nt:"10
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 } //循环结束?>
想知道: 地图上怎么标记多个目标,并且在同个地图上显示多个标注的地点?

广播传媒

广播传媒

那是批量标注的,我可以给你做的。专业地图、地图、凯立德地图等电子地图标注,:2646084463

2021-09-23 17:28:53 911查看 1回答

如何标注重点内容?

kangkey

kangkey

具体步骤:1‍.打开聊天界面,找到那个字2.按往那个字所在的信息位置,直到出现收藏,点击收藏3.收藏完成,做下标记,在个人信息收藏里面就可以看到收藏的重要的字

2021-09-23 17:29:01 1039查看 1回答

为什么手机地图和网页地图的内容不一样啊?

谢文静

谢文静

因为手机要照顾到和兼容性。(亲,如果觉得信息有用,麻烦点击个“好评”可以么,谢谢。)

2021-09-23 17:29:22 1024查看 2回答

中国电子地图如何显示全部标注公司内容?

? Regret.

? Regret.

这个是通过内部系统,层次标注,当然需要各个部门统一标入。如果对你有帮助请点好评谢谢

2021-09-23 17:29:22 1099查看 1回答

地图上怎么标记多个目标,并且在同个地图上显示多个标注的地点?

丁三世004

丁三世004

地图右边顶部,有个工具:

2021-09-23 17:30:18 337查看 2回答

想知道: 地图上怎么标记多个目标,并且在同个地图上显示多个标注的地点?

巴宝

巴宝

您好,无限量的,如果您的商户分指路人地图标注服务中心超过十家指路人地图标注服务中心,我们可以帮您做批量。

2021-09-23 17:30:22 291查看 2回答

如何实现地图上显示多个自定义内容不一样的标注

瞎子

瞎子

1,第一步当然是建立地图放置的容器嘛,这个不解释<divclass="s_r"style="float:left;width:680px;height:620px;margin-top:10px"id="container2"></div>...

2021-09-23 17:32:27 270查看 1回答

如何实现地图上显示多个自定义内容不一样的标注

咿呀咿呀喔

咿呀咿呀喔

1,第一步当然是建立地图放置的容器嘛,这个不解释<divclass="s_r"style="float:left;width:680px;height:620px;margin-top:10px"id="container2"></div>...

2021-09-23 17:32:27 342查看 1回答

怎么在地图上,同时显示多个标注。

canlandegou

canlandegou

码如下:12345678910111213141516171819202122// 编写自定义函数,创建标注    function addMarker(nt, lable, Htmlname, myIcon) {        //创建标注点        var mar...

2021-09-23 17:34:30 780查看 2回答

地图上怎么标记多个目标,并且在同个地图上显示多个标注的地点?

Miss-公爵

Miss-公爵

您有10注,就可以提标注,详情回点击链答接查看:链接

2021-09-23 17:34:34 384查看 3回答

最新知识

公司地址如何入驻花小猪打车地图标记?指路人地图标注服务中心铺如何入驻花小猪打车地图标记?

小编为您整理美团商家如何入驻,商家入驻教程、商家如何入驻地图、如何入驻地:、养殖营业执照如何入驻地图、家政公司如何入驻美团相关地图标记知识,详情可查看下方正文!

公司地址认领搜狗地图标注多久审核?公司地址认领地图标注多久审核?

小编为您整理我在地图上标注审核认领需要多久、我在地图上标注审核认领需要多久y、我在地图上标注审核认领需要多久i、我在地图上标注审核认领需要多久Y、搜狗地图标注要多久才显示相关地图标记知识,详情可查看下方正文!

门指路人地图标注服务中心如何做花小猪打车地图位置标记?门指路人地图标注服务中心花小猪打车地图位置地址标记?

小编为您整理如何做地图标记、地图如何做标记、so搜街景中如何做标记、360e启花贷款申请通过了是要去到门指路人地图标注服务中心办理手续的吗、哪些软件能实现在地图上标记门指路人地图标注服务中心位置相关地图标记知识,详情可查看下方正文!

门指路人地图标注服务中心地图位置地址标记?门指路人地图标注服务中心苹果地图位置地址标记?

小编为您整理哪些软件能实现在地图上标记门指路人地图标注服务中心位置、门指路人地图标注服务中心地址标注、如何创建门指路人地图标注服务中心定位地址、如何创建门指路人地图标注服务中心定位地址、服装门指路人地图标注服务中心地址标注上地图怎么弄相关地图标记知识,详情可查看下方正文!

凯立德地图位置定位怎么设置自己的指路人地图标注服务中心名?凯立德地图位置定位怎么设置公司地址?

小编为您整理凯立德怎么定位自己的位置啊、手机凯立德地图定位怎么设置往上走、地图位置定位怎么设置自己的指路人地图标注服务中心名、凯立德手机版如何定位自己的位置,求助、凯立德导航怎么设置指路人地图标注服务中心铺招牌相关地图标记知识,详情可查看下方正文!

最新问答
热门专题