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

简介: 原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提示信息也当然要不一样嘛,因为给标注绑定的鼠标事件当你移动鼠标上去的其实循环值已经是最后值了,所以无论你怎么做,所有的标注点都是同一个提示,就是最后的那个提示.
原文: 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

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

1,第一步当然是建立百度地图放置的容器嘛,这个不解释

 

2,地图旁增加一排文字,把标注点的信息一个一个都列出来,这个以后要用于和地图上的标注连接起来的,在这边点击一下,地图那边标注相应的点就弹出提示信息了,样式就是如下

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

foreach(areashoplistaskey=>$rs){

?>

}

?>

 

3,下来就可以去页面的下面写javascript代码了,首先要把php后台给你的数组$areashoplist变成javascript的数组,这个很简单嘛,就是循环嘛,按着格式循环出来就行了.

var markerArr=[

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("",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

  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("" + markerArr[i].title + "

"+markerArr[i].content+"
销售热线:"+markerArr[i].tel+"
");

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

}

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

 

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

for(i=0;i

?>

  marker[].addEventListener("mouseover", function(){this.openInfoWindow(info[]);});

}

 ?>

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

for(i=0;i

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

  continue;

  }

?>

  $('#list').live('mouseover',function(){

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

  return false;

  });

 

 }       //循环结束

?>

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

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

 

目录
打赏
0
0
0
0
216
分享
相关文章
全球最新地震信息免费API接口教程
该接口提供全球最新地震信息,数据源自中国地震台网,每5分钟更新一次。支持POST/GET请求,需提供用户ID和KEY。返回数据包括地震等级、时间、经纬度、深度及位置等详细信息。示例请求和响应详见文档。
构建智能 API 开发环境:在 Cursor 中连接 Apifox MCP Server
本文介绍了如何将Apifox MCP Server与Cursor结合,通过AI直接获取和理解API文档,大幅提升开发效率。首先需配置Apifox的Access Token和项目ID,并在Cursor中设置MCP连接。实际应用场景包括快速生成模型代码、同步更新接口文档与代码、生成CRUD操作、搜索API文档及自动生成测试用例。此外,还提供了管理多项目、安全性实践和优化AI响应质量的技巧。这种组合可显著减少从API规范到代码实现的时间,降低错误率并加速迭代过程,为开发者带来更高效的体验。
鸿蒙 Next 对接 AI API 实现文字对话功能指南
本指南介绍如何在鸿蒙 Next 系统中对接 AI API,实现文字对话功能。首先通过 DevEco Studio 创建项目并配置网络权限,选择合适的 AI 服务(如华为云或百度文心一言)。接着,使用 Node.js 转发请求,完成客户端与服务器端代码编写。最后进行功能测试与优化,确保多轮对话顺畅、性能稳定。此过程需严格遵循开发规范,充分利用系统资源,为用户提供智能化交互体验。
商品信息API接口的设计与实现
商品信息API接口的设计与实现,遵循RESTful原则以确保高效、可维护和良好的用户体验。API支持获取、查询、创建、更新和删除商品资源,URL模式直观易懂。请求参数通过查询字符串传递,支持分页和过滤。响应体结构化,包含数据、链接和元数据字段,便于解析。错误处理采用HTTP状态码结合JSON错误描述,提供明确反馈。
解锁电商数据的无限可能:探秘京东商品SKU信息API接口
京东商品SKU信息API接口是电商开发与运营中的重要工具,帮助开发者获取商品的详细属性,如库存、价格、规格等。通过该接口,电商平台可以丰富商品展示页面,提升用户体验;商家能实时掌握库存动态,优化销售策略;数据分析人员可深入洞察市场趋势,实现精准营销。使用前需注册京东开放平台账号、创建应用并获取API权限,同时仔细阅读API文档以确保正确调用。代码示例展示了如何用Python调用该接口,并处理返回数据。未来,该接口将在个性化推荐、智能库存管理和数据分析等领域发挥更大作用,助力电商业务创新与发展。
211 14
|
4月前
|
获取1688商品SKU信息API接口及实战应用
在电商蓬勃发展的今天,数据成为宝贵的财富。1688作为国内知名批发采购平台,提供商品SKU信息API接口,可获取库存、价格、规格等关键数据,助力电商运营、市场分析和价格监控。本文介绍如何注册1688开放平台账号、创建应用并获取AppKey/AppSecret,申请API权限,使用Python实现接口调用,处理响应数据,并注意请求频率限制和错误处理。通过该接口,可为电商运营和数据分析提供有力支持。
185 2
探秘淘宝商品SKU信息API接口
在电子商务中,SKU(库存量单位)用于区分商品的不同规格、颜色、尺寸等属性,是精细化管理的基础。本文深入探讨淘宝商品SKU信息API接口,介绍其功能特点、使用方法及应用场景,并提供Python代码示例。该API支持实时更新、多维度筛选,帮助开发者获取全面的SKU信息,优化库存管理、订单处理和销售数据分析,提升运营效率与市场竞争力。
253 1
深度探索淘宝详情API接口:高效获取商品信息的实践指南
淘宝详情API接口是阿里巴巴开放平台的重要组成部分,帮助开发者通过程序化方式获取淘宝商品的详细信息,如标题、价格、销量等。本文介绍其使用方法,涵盖权限申请、请求构造、异常处理及高级应用,助力开发者优化电商体验和业务决策。
【Azure Developer】Python代码调用Graph API将外部用户添加到组,结果无效,也无错误信息
根据Graph API文档,在单个请求中将多个成员添加到组时,Python代码示例中的`members@odata.bind`被错误写为`members@odata_bind`,导致用户未成功添加。
73 10
1688榜单商品详细信息API接口的开发、应用与收益
1688作为全球知名的B2B电商平台,为企业提供丰富的商品信息和交易机会。为满足企业对数据的需求,1688开发了榜单商品详细信息API接口,帮助企业批量获取商品详情,应用于信息采集、校验、同步与数据分析等领域,提升运营效率、优化库存管理、精准推荐、制定市场策略、降低采购成本并提高客户满意度。该接口通过HTTP请求调用,支持多种应用场景,助力企业在电商领域实现可持续发展。
139 4
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等