高德地图实现多点标注marker和动态信息窗体

先说一下项目对地图的需求:在后台新增地图管理模块,要求,每一辆车都在地图上有标注,而且点击标注时要显示出车辆的相关信息,比如车牌和车辆的当前状态。

下图就是实现的效果。


当然从高德地图api也能查看到这一块,比如多点标注,简单信息窗体,这些都有api,可以先看官网的,然后,再看我这篇文章,怎么融合一起,记住数据全部来自后台数据库,这样才能保证一切数据都是动态的,可实时更新的。

首先,定义map,渲染出基础的地图。

var map = new AMap.Map('container', {resizeEnable: true,   zoom: 5
});  

center我就暂时没有定义会自动定位IP的地址获取中心点。接下里需要清除障碍物,全局几个变量,
map.clearMap();  
var markers = []; 
var infoWindow;


好的,接下里开始请求数据,数据主要包括坐标点和信息窗体要展示的参数,比如我的有车辆的运单号和车辆状态,车牌号等参数。

$.ajax({url : "eos_TranOrderFollowing/mapcartrans.do",type : "get",dataType : "json",success : function(e) {// var data=[{"fLong":'112.00003','fLati':'38.2345'},{"fLong":'115.00003','fLati':'38.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];// e.data = data;var marker;		for(var i=0 ; i< e.data.length;i++){var jfong=[ e.data[i].fLong,e.data[i].fLati];	marker = new AMap.Marker({position: jfong,zIndex: 101,map:map});	console.log(e.data[3]);	marker.setMap(map);	marker.orderON=e.data[i].orderON;marker.tranOFID=e.data[i].tranOFID;marker.fhadd=e.data[i].fhadd;marker.sAdd=e.data[i].sAdd;marker.status=e.data[i].status;			marker.on('click', function(e){infoWindow.setContent("<ul class='main'><li> 运单号: <span style='color:blue'>"+e.target.orderON+"</span></li>" + "<li>  派车单号: <span style='color:blue'>"+e.target.tranOFID+"  </span></li>" + "<li>  发货地址: <span style='color:blue'>"+e.target.fhadd+"  </span></li>"+ "<li>  收货地址: <span style='color:blue'>"+e.target.sAdd+"  </span></li>"+ "<li>  车辆状态 : <span style='color:blue'>"+e.target.status +"  </span></li></ul>");infoWindow.open(map, e.lnglat);});}	// for-endinfoWindow = new AMap.InfoWindow({isCustom:	true,draggable: true,  //是否可拖动offset: new AMap.Pixel(0, -31),content:""});}}) //	Ajax结束


因为,我要展示的marker是很多的,后台返回的数据肯定不止1条,所以通过for循环,拿到所有的坐标,我定义的jfong变量,比如我的就有16个坐标点,然后定义marker,把position = jfong;这样就同样可以获得16个marker点了,然后添加标注图标icon,需要自定义图标的看下官网api很简单的。
marker.setMap(map);


这样多点的marker就实现了,接下来就是信息窗体了。因为我们需要在信息窗体展示的动态数据是在success:function(E)里面的,也就是在E里面。而点击图标时,执行的function(e),这个e是高德地图定义的,这里就需要把我们自己的参数赋值到这里面,也就是代码中的   marker.参数名称 = E.data[i].参数名称,通过这样的赋值后,捏可以打印一下(e)看下数据,然后通过e.Target.参数名称   就能够拿到了。信息窗体就不用多说了,把重点的参数赋值说明白就OK啦。我是自定义的信息窗体,通过setContent 动态设置了参数。


毕竟是自定义的信息窗体,所有肯定需要关闭按钮,样式自己随便写,只需要执行关闭自定义信息窗体事件即可

 function closeInfoWindow() {map.clearInfoWindow();}


好了,这样一个多点标注+动态信息窗体就轻松的实现了。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/58258.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#使用GDI+绘制高质量图和字体

对于GDI,在正常的操作,Bitmap-- Graphcis -- DrawImage或者DrawString ,生成图片的话,会产生很多杂点,或者是图片质量不稳定..尤其是在读取图片后,生成缩略图之后,文件会被压缩而失真..主要原因是因为没有重新设置Graphics的几个属性..1.Graphics.SmoothingMode属性: 例如Smoot…

软件设计师:09-软件工程

章节章节01 - 计算机组成原理与体系结构07 - 法律法规与标准化与多媒体基础02 - 操作系统基本原理08 - 设计模式03 - 数据库系统09 - 软件工程04 - 计算机网络10 - 面向对象05 - 数据结构与算法11 - 结构化开发与UML06 - 程序设计语言与语言处理程序基础12 - 下午题历年真题End…

【中级软件设计师】—(针对上午题)软件工程上(三十五)

【中级软件设计师】—&#xff08;针对上午题&#xff09;软件工程&#xff08;三十五&#xff09; 一、CMM 1 2 3 4 5 二、能力成熟度模型集成&#xff08;CMMI&#xff09; 6 7 8 9 三、软件过程模型 &#xff08;一&#xff09;、瀑布模型 &#xff08;二&#xff09;、V模…

软件工程_绘制数据流图

软件工程_绘制数据流图 实验目的&#xff1a; 1、掌握数据流的分析方法 2、掌握数据流图的绘制 实验原理&#xff1a; 数据流图&#xff08;DFD&#xff09;是软件系统系统的逻辑模型&#xff0c;仅仅描绘数据在软件中流动&#xff08;从输入移动到输出&#xff09;的过程中所…

20230120英语学习

How Animals May Have Conquered Snowball Earth “雪球地球”时期&#xff0c;动物是如何存活的&#xff1f; Planet Earth used to be something like a cross between a deep freeze and a car crusher.During vast stretches of the planet’s history, everything from p…

Time For Kids 很不错的英语学习周刊

英语&#xff0c;是全世界使用范围最广的一门语言&#xff0c;因此&#xff0c;学好英语是一件很重要的事情&#xff0c;而它的重要和存在形式也不仅仅是在学习分数上&#xff0c;英语是一种语言&#xff0c;也是一门工具&#xff0c;学好它&#xff0c;对于我们&#xff0c;尤…

大数据工程师应聘要求高么?好找工作么

大数据开发工程师该岗位对于技术要求较高&#xff0c;有一定的技术门槛。大数据工程师不少细分方向&#xff0c;不同的方向需要具备不同的知识结构&#xff0c;分别是大数据底层平台研发、大数据应用开发、大数据分析和大数据运维。 大数据开发工程师负责数据仓库建设、ETL开发…

大数据好找工作么?前景如何

大数据好不好找工作不是一概而论的&#xff0c;要根据你个人的学历情况&#xff0c;掌握技能程度&#xff0c;所在城市招聘需求&#xff0c;甚至是你的面试能力和简历是否突出优势有关。 但是毋庸置疑的是&#xff0c;大数据目前的发展前景还是相当优秀的。 我们知道&#xf…

都说大数据前景很好,那么大数据培训出来就业情况如何?

大数据的就业形式还是很不错&#xff0c;就业薪资还是很高&#xff0c;在网上随便一搜&#xff0c;如图 如果大数据还在自学中的同志们&#xff0c;赠送你们一张学习路线

如何读一个在职在线的海外名校的计算机硕士

对于参加工作几年的朋友&#xff0c;可能面临职场晋升压力&#xff0c;而身边的同事又都拥有硕士、博士学历&#xff0c;此时迫切想提升学历。 现在以某教育机构和伊利诺伊理工大学的在线硕士项目为例&#xff0c;作简单的科普介绍&#xff0c;事先说明此非推广宣传&#xff0…

计算机专业留学美国前景一如何,美国计算机专业国内外就业前景到底如何?和你想的一样吗?...

原标题&#xff1a;美国计算机专业国内外就业前景到底如何&#xff1f;和你想的一样吗&#xff1f; 在我们选择专业的时候&#xff0c;“就业前景”是几乎每个同学和家长都会考虑的问题。我们都知道美国大学有很多专业&#xff0c;其中计算机科学专业是绝对的优势也是申请的热门…

英国计算机专业申请条件有哪些?就业前景怎么样?

曾经有人说过&#xff0c;计算机是人类历史上最伟大的发明&#xff0c;因为计算机的出现使人们的工作效率大大提升了&#xff0c;而且自从计算机越来越普遍之后&#xff0c;学习计算机专业的学生也越来越多了&#xff0c;而英国在计算机领域的造诣非常高&#xff0c;因此去英国…

ChatGPT评中国最好就业的十大专业!人工智能,数据科学,网络安全排名前列!...

以下是ChatGPT认为未来考研最好就业的十大专业&#xff0c;并按照重要性从高到低排列&#xff08;仅供娱乐哦&#xff09; 需要注意的是&#xff0c;这只是ChatGPT的看法&#xff0c;其他人可能会有不同的观点和评价标准。 此外&#xff0c;不同的发展阶段和政策导向也会对专业…

商业创业计划书的21条重要事项

创业者们&#xff0c;商业计划书是你们找VC的敲门砖。没有一块有分量的敲门砖&#xff0c;怕你们敲不开VC的大门。 这世界上永远是来要钱的人多&#xff0c;能给出去的钱少&#xff0c;僧多粥少&#xff0c;融资是有门槛的。如果没有一份有分量的商业计划书&#xff0c;你根本就…

“ 奋斗者耕耘论坛 ” 商业计划书 | 内卷 | 大学生创业计划书 | 大创 | 创新杯项目 | 如何财富自由 | 怎么发财 | 赚钱方法

1. 1. 产品背景 产品背景 2020 年, 各行各业的奋斗者们都很焦虑. 他们在”内卷”的大环境下压力 从从. 无论是大学还是职场, 奋斗者们努力着挥洒汗水, 希望实现自己的梦想, 过上追求的美好生活. 无论是学业的压力还是职场的压力, 让这些曾经高考的 佼佼者, 毕业生中的优胜者也苦…

2021大学生创业计划书范例

想看更多算法题&#xff0c;可以扫描上方二维码关注我微信公众号“数据结构和算法”&#xff0c;截止到目前我已经在公众号中更新了500多道算法题&#xff0c;其中部分已经整理成了pdf文档&#xff0c;截止到目前总共有800多页&#xff08;并且还会不断的增加&#xff09;&…

“互联网+”创新创业计划书(二)

“智能便携式电动滑板”项目介绍&#xff1a; ------Intelligent portable electric skateboards

创业计划书

要求 清楚明了、真实可信、简明扼要、图表、逻辑性强、佐证材料 作用&#xff1a;指明目标 给员工绘制蓝图给投资方看 创业须知 创业创意选择要差异化、尽量避免同仁化 多了解法律知识 如何介绍自己的公司或产品 a. 模板法&#xff1a;(公司的名称)提供的(产品或服务)利…

TikTok剪辑系统升级:照片模式增加文案字数,达人合作平台更新

武汉瑞卡迪电子商务有限公司&#xff1a;此次TikTok针对应用内的剪辑功能进行了优化升级&#xff0c;为用户建立了一个更实用的剪辑系统&#xff0c;融合多种功能于一体&#xff0c;现在TikTok内可直接完成裁剪视频、编辑音频、设置画中画、调节视频播放速度、设置画面边框大小…

剪映专业版字幕导出随笔

目录 剪映专业版字幕导出随笔环境准备字幕生成字幕捕获字幕处理小结 剪映专业版字幕导出随笔 最近有个识别视频中人声转成字幕并导出的小需求&#xff0c;找了一圈发现头条系的剪映专业版真好用&#xff0c;借助剪映专业版的识别字幕功能&#xff0c;以及抓包工具 fiddler 获取…