高德地图实现多点标注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();}
好了,这样一个多点标注+动态信息窗体就轻松的实现了。
高德地图实现多点标注marker和动态信息窗体相关推荐
- 我的高德地图之定位,Marker,位置信息。
高德地图 ---定位,Marker 本期给大家高德地图的展示,和定位,并显示popwindow(当前位置信息),滑动地图实时更新位置信息: 界面预览 具体实现 新司机爬坑 界面预览 具体实现 //地图 ...
- Vue中集成高德地图API实现定位与自定义样式信息窗体
场景 若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
- 高德地图如何同时显示多个InfoWindow信息窗体
效果如下图: 众所周知,高德的 Infowindow 只能同时显示一个,想要通过Infowindow来实现图中的效果是不行的.但是覆盖物是可以显示多个的,比如说marker.所以下面的思路就是,给定一 ...
- 高德地图上线武汉千家商超信息 可预约团购、查营业时间和电话
今日起,武汉用户在高德地图上搜索"武汉超市",可查看小区附近所有商超门店,点击进入详情页面,便可了解相关商超的营业状态和联系方式.目前,全市已有超过1000家商超企业入驻高德地图. ...
- 高德地图导航和标注,通过调用高德APP实现呢
在调用高德地图APP提供坐标定位位置,若果是需要导航的话可以参考下面1,如果还想知道路线.周边.导航请调用标注来实现,标注包含导航功能. 1 导航(调用显示导航图) 一种是通过高德提供的SDK实现,另 ...
- 高德地图车头方向,marker方向控制,车辆移动,轨迹展示,轨迹回放
经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹 在高德地图中展示车辆轨迹有三种方法,一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹: 高德地图轨迹展示 ...
- 高德地图怎么搜索marker_2018-07-06 高德地图搜索定位,滑动地图显示周边信息,根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...
- 百度地图html多点标注,百度地图api 同时在地图上标注多个点 有问题 紧急求救...
for (var i = 0; i < titles.length; i++) { ( function (x) {//关键 var longitude = longitudes[i]; var ...
- android高德地图自定义带数字marker图标,自定义图标-点标记-示例中心-JS API 示例 | 高德地图API...
图标点标记 html,body,#container{ height:100%; width:100%; } .amap-icon img{ width: 25px; height: 34px; } ...
最新文章
- Java 9 揭秘(19. 平台和JVM日志)
- GDCM:gdcm::PNMCodec的测试程序
- maven的常见问题_Maven常见问题和陷阱
- [vue] 在vue项目中如何配置favicon?
- 图解springmvc 执行流程
- AlexNet层级分析(涉及:卷积核操作下下层网络特征图size计算;对通道和卷积核尺寸及通道前层feature map和卷积核的运算关系的解释)
- 硬刚 Kafka,Apache 顶级项目背后的公司完成数百万美元 Pre-A 轮融资
- java i o是什么流_Java I/O流介绍
- access数据库窗体设计实验报告_access计算机实验报告:窗体
- 用计算机知道手机号码,知道手机号怎么整贱人-原来微信的“+”号还有这些隐藏用法?居然可以一键检测真假好友...
- 北美计算机专业申请,美国计算机专业名校TOP5申请深入解读
- 计算机表格制作培训教材,电脑制作表格教案设计
- win11提示此驱动正在使用中,硬盘格式化不了
- 计算机网络与应用技术清华答案第二版,计算机网络-原理、技术与应用(第2版)部分习题答案(不外传!).pdf...
- CSS中常用的选择器都有那些?
- NXP RT1052 eFlexPWM—灵活的增强型 PWM例程
- 《视觉SLAM十四讲》学习笔记:第5讲相机与图像
- 数据运营-数据管理平台
- python笔记6-python官方文档之format()格式化详解
- Bilateral Self-unbiased Learning from Biased Implicit Feedback-2022年9月之前最新的推荐系统方向论文