原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提示信息也当然要不一样嘛,因为给标注绑定的鼠标事件当你移动鼠标上去的其实循环值已经是最后值了,所以无论你怎么做,所有的标注点都是同一个提示,就是最后的那个提示.我就打开百度找方案嘛.一找之下,搜了几十页就一个解决方案,大家都是你拷贝我的我拷贝你的.做个闭包.把循环的值锁定在里面.代码照着做,也的确可以通过.但是我想了想这种方法不是很合适现在的站点,所以就要动脑子想个其他的思路了,最后我用php绕开了这个拦路虎,回过头看看,感觉逻辑更清晰,也更容易操作,好吧,也许因为我是个phper,下面是解决方案,按着顺序来,有点基础的都能看懂,而且很好移植.

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>

<u
class="name"><a href=""  target="_blank"
id="list1">标注点2</a></u>

<li >简介2
</li>

</ul>

这个东西不要手工写,最好用php把数组循环出来写进去,这个数组就是你要标注的点的所有信息啊,比如名字,电话,标注点的经纬度,数据库的id号等等,因为后面在javascript中也要用到这个php的数组,保持顺序一致是很重要的,不要问我这个数组哪里来,这个问自己...,我这边的是这样写的,$areashoplist就是准备好的数组,$key是数组中元素的顺序,写在这里便于以后分辨连接.

<?php

foreach($areashoplist as $key=>$rs){

?>

<ul>

<u class="name">

<a href="<?php echo W_BASE_URL;?>dealers/<?php echo $rs["id"]?>/"  target="_blank" id="list<?php echo $key ?>"><?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']."\",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("<?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 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]);                            //在地图上循环添加标记

  info[i]=new BMap.InfoWindow("<b class='iw_poi_title' title='" + markerArr[i].title + "'>" + markerArr[i].title + "</b><div class='iw_poi_content'>"+markerArr[i].content+"</div><div class='iw_poi_content'>销售热线:"+markerArr[i].tel+"</div>");

//生成提示信息窗口,并将窗口对象按顺序存入数组中

}

好了现在标注点,提示信息都按顺序存入数组了,提示点在地图上也已经显示出来了

6,下来就该把提示信息和相关的标注点绑定起来了,还是按循环一个一个的取,因为两个数组的顺序都是一样的,所以配对就好配对了

<?php

for($i=0;$i<count($areashoplist);$i++){

?>

  marker[<?php echo $i;?>].addEventListener("mouseover", function(){this.openInfoWindow(info[<?php echo $i;?>]);});

<?php

}

?>

最后的结果就是有多少个标注点,绑定多少次,数组的下标已经固定了,不存在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绑定一个事件当然就很简单了

<?php

for($i=0;$i<count($areashoplist);$i++){

  if(is_null($areashoplist[$i]['mappoint'])){                       //如果mappoint没有设置则跳过本次循环,执行下一个循环

  continue;

  }

?>

  $('#list<?php echo $i;?>').live('mouseover',function(){

  map.openInfoWindow(info[<?php echo $i;?>],point[<?php echo $i;?>]);        //将信息提示窗口的显示按顺序绑定给外部的链接文字

  return false;

  });

<?php

 }       //循环结束

?>

这里为什么要用到php分配下来的原始数组,而不是javascript的数组呢,答案,为了图方便嘛,其实我只是要那个$i的值就够了,这几个数组的下标都是一一对应的,另外判定了如果没有mappoint值就是相对应的信息没有地图上的标注点经纬度,那就不执行绑定动作,这样也避免了错误.

这里用到了php和html的混编,其实用到的php功能很简单,如果你的页面用的smarty模版之类,用模版的循环取值也完全可以做到

百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法的更多相关文章

  1. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  2. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  5. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  6. 【百度地图API】建立全国银行位置查询系统(二)——怎样为地图添加控件

    原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...

  7. 【百度地图API】建立全国银行位置查询系统(一)——如何创建地图

    原文:[百度地图API]建立全国银行位置查询系统(一)--如何创建地图 <摘要>你将在第一章中学会以下知识: 如何创建一个网页文件 怎样利用百度地图API建立一张2D地图,以及3D地图 如 ...

  8. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  9. 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

随机推荐

  1. [LeetCode299]Bulls and Cows

    题目: You are playing the following Bulls and Cows game with your friend: You write down a number and ...

  2. 获取activity的根视图

    Activity的根视图是什么? Activity所谓的根视图,就是Activity的最底层的View,也就是在Acitivty创建的时候setContentView的时候传入的View. 如何获取到 ...

  3. lua.c:80:31: fatal error: readline/readline.h: No such file or directory

    make linuxcd src && make linuxmake[1]: Entering directory `/root/lua/lua-5.3.2/src'make all ...

  4. CF(427D-Match &amp; Catch)后缀数组应用

    题意:给两个字符串,求一个最短的子串.使得这个子串在两个字符串中出现的次数都等于1.出现的定义为:能够重叠的出现. 解法:后缀数组的应用.从小枚举长度.假设一个长度len合法的话:则一定存在这个样的s ...

  5. 读书时间《JavaScript高级程序设计》二:面向对象

    接着上次的进度,开始看第6章. 第6章 面向对象的程序设计 理解对象 创建自定义对象最简单的方式就是创建一个 Object 的实例,然后为它添加属性和方法. var person = new Obje ...

  6. B/S VS C/S

    从软件project的学习到如今的机房合作,我们一直在学习C/S,进入牛腩才正式进入了对B/S的了解,确切点牛腩则是对此的一个过渡,起到了承上启下的作用!看牛腩,事实上最大的感受就是他不止要设计到页面 ...

  7. MTK MOTA升级步骤

    MOTA的前提下有其自己的server,MTK我在已经完成,可以MTK应用,然后移动到它自己的server向上. 1.打开ProjectConfig.mk中间MTK_SYSTEM_UPDATE_SUP ...

  8. 如何使用autolayout的UIView加入动画

    hi,all: 在经过了一番犹豫之后,我决定将我自己做的这个小APP的源代码发布给大家: 其出发点是和大家一起学习iOS开发,仅供学习參考之用. 之前代码是托管与gitlab 上的.今天我将其pull ...

  9. net中使用ETW事件

    在.net中使用ETW事件的方法   直到.net4.5,才有了比较便利的操作ETW的方法. 本文介绍的方法主要来源于Microsoft.Diagnostics.Tracing.TraceEvent官 ...

  10. Visual Studio Team Services使用教程--邀请团队成员