高德地图如何同时显示多个InfoWindow信息窗体

效果如下图：

众所周知，高德的 Infowindow 只能同时显示一个，想要通过Infowindow来实现图中的效果是不行的。但是覆盖物是可以显示多个的，比如说marker。所以下面的思路就是，给定一个点的坐标，用两个marker来显示这个点，上面的marker其实就是信息弹框的实现。

下面是实现代码：

定义两个标记点，一个是marker（用来表示坐标位置的标记点），另外一个是markerUpon（通过自定义标记内容来实现Infowindow的效果）

pointBE(point) {let marker = new AMap.Marker({   // 标记点position: new AMap.LngLat(point.pos[0], point.pos[1]),content: '<div id="circle_route_bot"></div>'+ '<div id="circle_route_mid"></div>',offset: new AMap.Pixel(-5, -7)     // 偏移位置});let markerUpon = new AMap.Marker({    // 信息窗体position: new AMap.LngLat(point.pos[0], point.pos[1]),content: '<div class="route_ticket">' + ' <div class="route_t_name">' + ' <div class="route_t_icon">' + ' <i class="el-icon-place" style="color: #5acc5a"></i>' + ' </div>' + ' </div>' + ' <div class="route_t_ticket">' + ' <div style="font-weight: 600;">' + point.local + ' </div>' + ' <div >' + point.time + ' </div>' + ' </div>' + ' </div>',    // 自定义信息窗体内容offset: new AMap.Pixel(-60, -50)    // 偏移位置});let markers = [marker, markerUpon];this.map.add(markers);}

下面是样式

#circle_route_bot{background-color: rgb(253, 247, 247);width: 14px;height: 14px;margin: 0;border-radius: 50%;box-shadow: 0px 0px 3px 1px rgba(40, 32, 32, 0.2)}#circle_route_mid {background-color: rgb(66, 197, 66);width: 10px;height: 10px;margin: -12px 0 0 2px;border-radius: 50%;}.route_ticket {width: 120px;height: 30px;padding: 5px 4px;text-align: left;background-color: #ffffff;box-shadow: 0px 0px 3px 1px rgba(40, 32, 32, 0.2);border-radius: 4px;}.route_t_name {background-color: #e8e8e8;width: 30px;height: 100%;float: left;margin-right: 8px;border-radius: 4px;}.route_t_icon{width: 100%;height: 100%;display:flex;justify-content:center;align-items:center;border-radius: 4px;}.route_t_ticket {background-color: #ffffff;width: 60%;float: left;font-size: 12px;}

然后是方法的参数:

{"pos":[ ， ],     // 坐标位置 eg：[1,1]"local": "",       // 显示信息"time": ""       // 显示信息}

思路就是这样，效果是我自己想要的效果了。

支持原创！！

=======================================================================

今天发现高德原来有可以直接使用的方法，直接调用 setLabel 方法就可以了。

高德地图如何同时显示多个InfoWindow信息窗体相关推荐

Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
高德地图实现多点标注marker和动态信息窗体
先说一下项目对地图的需求:在后台新增地图管理模块,要求,每一辆车都在地图上有标注,而且点击标注时要显示出车辆的相关信息,比如车牌和车辆的当前状态. 下图就是实现的效果. 当然从高德地图api也能查看到 ...
vue 高德地图不同区域显示不同颜色_高德百度哪家强？苹果Carplay第三方分屏功能评测...
几天前,苹果公司正式更新了iOS13.4版本.一个小版本系统更新,却让车主群热闹了起来.在这个版本中,苹果正式开放了Carplay分屏显示模式下对第三方地图的支持. 车主们的热情,化为高德地图和百度地 ...
高德地图开发(一)显示地图与定位
如果地图功能随处可见,应用很广,这里利用高德地图的SDK来实现地图的显示以及定位功能.如需要详细了解参考官网信息http://lbs.amap.com/api/android-sdk/summary ...
Android的高德地图实现行政区域显示
Android app中查看位置,当位置没有具体地址,而是一个区镇的时候,一直没想好怎么处理.知道仔细看了一遍高德地图的官方文档,看到有行政区域这个功能,我们可以通过DistrictSearch类来发 ...
vue 高德地图不同区域显示不同颜色_老司机频繁掉沟里，高德百度腾讯地图导航到底该怎么选？...
导航类app发展至今,基本形成了三分天下的局面:高德.百度.腾讯,然而事实真的是三家平分天下么?三款不同的地图导航软件各有优缺点,至于什么路况选择哪个软件导航似乎更是一门玄学? 很多人想知道高德地图. ...
vue 高德地图不同区域显示不同颜色_高德地图车机版4.0解析：看不见的升级才是重点...
近日,高德正式发布高德地图车机版(AMAP AUTO)4.0. 自2016年初高德地图车机版(AMAP AUTO)首次亮相后,此次正式推出的4.0版本,已经是该智能车载导航产品的第三次大升级. 在车云 ...
vue 高德地图不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...
android高德地图设置默认显示位置
开始最近在搞高德地图开发,发现每次在定位到当前位置之前,总会先默认显示北京,这样给人感觉不是很好,因为我们的项目主要是在哈尔滨市用,所以希望,在使用地图时显示当前位置之前默认先显示哈尔滨市代码 a ...

高德地图如何同时显示多个InfoWindow信息窗体

高德地图如何同时显示多个InfoWindow信息窗体相关推荐

最新文章

热门文章