vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记
前言
覆盖物的最高级就是自定义覆盖物,而往往业务中就必须用自定义覆盖物,因为都用上了地图这么吊的组件了,覆盖物也必须华丽、高度定制。
官网
Github
自定义覆盖物手册
效果
效果核心其实是三角箭头的阴影,其他都很好说。说起三角的阴影,其实就是看你对box-shadow是否精通,原则上是上方的2条边不能出现shadow,下方的shadow要贴近大容器的shadow,混为一体。
方案一,有宽高容器背景染色,加旋转加shadow:
有宽高容器背景染色,加旋转加shadow
方案二,无宽高容器利用border染色,加旋转加shadow:
无宽高容器利用border染色,加旋转加shadow
这两个方案都差不多,主要考察你是不是对shadow调试的更好。
方案一,有宽高容器背景染色
解释一下left: 113.7px;,它的计算方法是:
250 / 2 = 125 算出中心点
√(16 * 16 * 2)是斜边的长度,大约等于22.6,一半等于11.3
125 - 11.3 = 113.7就是left: 113.7px;
.bm-overlay {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
&::after {
position: absolute;
content: "";
transform: rotate(45deg);
width: 16px;
height: 16px;
font-size: 0;
position: absolute;
background-color: #fff;
box-shadow: 5px 5px 5px -5px #ccc;
bottom: -8px;
left: 113.7px;
}
.logo {
width: 60px;
height: 60px;
margin: 0 10px 0 0;
vertical-align: top;
}
.inline-block {
width: 160px;
vertical-align: top;
}
.title {
color: #333;
font-size: 14px;
font-weight: bold;
}
.contents {
color: 666;
font-size: 12px;
}
}
方案二,无宽高容器利用border染色
.bm-overlay {
width: 250px;
height: 80px;
line-height: 1.6;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 8px;
padding: 10px;
position: relative;
font-size: 0;
&::before {
position: absolute;
content: "";
width: 0;
height: 0;
font-size: 0;
position: absolute;
transform: rotate(45deg);
border-width: 8px;
border-style: solid dashed dashed;
border-color: transparent #fff #fff transparent;
box-shadow: 1px 1px 1px #ccc;
bottom: -8px;
left: 113.7px;
}
.logo {
width: 60px;
height: 60px;
margin: 0 10px 0 0;
vertical-align: top;
}
.inline-block {
width: 160px;
vertical-align: top;
}
.title {
color: #333;
font-size: 14px;
font-weight: bold;
}
.contents {
color: 666;
font-size: 12px;
}
}
el.style.left 的偏移量
draw({ el, BMap, map }) {
const pixel = map.pointToOverlayPixel(
new BMap.Point(114.628239, 38.041396)
)
el.style.left = pixel.x + 'px'
el.style.top = pixel.y + 'px'
},
这里el.style.left和el.style.top要设偏移,默认是左上角。
先说x轴,应偏移半个大容器宽度,125。el.style.left = pixel.x - 125 + 'px'
再说y轴,应偏移整个大容器高度加上三角容器斜边一半,上面有计算过,是11.3,所以是91.3。el.style.top = pixel.y - 91.3 + 'px'
vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记相关推荐
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
- 百度地图自定义覆盖物,在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件 最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...
- 百度地图:层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码 图片: 第一层地图 点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层 拖拽地图或者缩放地图会触发可视化数据 下拉 ...
- map.addoverlay php,覆盖物 - 百度地图开发文档 - php中文网手册
地图覆盖物概述 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物.如标注.矢量图形元素(包括:折线和多边形和圆).信息窗口等.覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动. 地图A ...
- 百度地图 自定义覆盖物 自定义字体图标 动态修改图标颜色
实现效果: 图标用的是字体图标,为了方便动态改变颜色 关键代码 function ComplexCustomOverlay(params) {let defaultParams = {point: { ...
- 百度地图删除地图上所有的标注和所有的覆盖物
//百度地图删除地图上所有的标注和所有的覆盖物 NSArray* array = [NSArrayarrayWithArray:_mapView.annotations];[_mapViewremov ...
- android高德地图上加自定义菜单,高德地图Android室内地图如何自定义覆盖物
高德地图Android室内地图如何自定义覆盖物 亲,小德看到亲已经在开坛创建工单咨询了呢,建议亲耐心等待回复哦,会有开发大神给亲回复哦~ gao de di tu a n d r o i d shi ...
- Map创建自定义图片图层,图片会随着地图缩放而缩放,uniapp、高德、腾讯、百度
场景:在项目开发中会遇到在map上绘制图层,一般想到的方法会是通过接口获取图层边界的所有点,由点生成polygons多边形面.polygons 多边形示例 数据过多地图会存在卡顿的问题. 目的:创建自 ...
最新文章
- 知识图谱从哪儿来?实体关系抽取的现状和未来
- hadoop 启动or运行mr错误
- 8086除法指令DIV,IDIV
- POJ 1321 棋盘问题(回溯)
- Webpack实战(九):实现资源按需加载-资源异步加载
- java miglayout_Java - MigLayout设置边界
- 员工为什么缺乏执行力?
- 3dmax9中文版注册机
- 第31讲 聊天室程序
- 一年级上册计算机教学计划,一年级上学期教学计划
- C语言中printf格式输出
- iOS14 本地网络(Local Network)被拒
- ABAP基本数据类型
- SAP 折旧在13-16调整期
- js 获取设备或浏览器唯一标识的方式
- Expected tensor for argument #1 ‘indices‘ to have one of the following scalar types: Long, Int; but
- Python爬虫实战(一) — Pixabay图片下载器
- 微信域名防红防封系统,轻松微信推广域名被屏蔽问题
- Python基础入门(夏敏捷等著)课后习题答案全解
- 嵌入式数据库知识概括
热门文章
- JQuery中的Deferred-详解和使用
- IOS开发基础篇 -- 分类、类别
- jQuery 请指出'$'和'$.fn'的区别?或者说出'$.fn'的用途。
- MySQL字符集的基本类型与统一字符集
- java list 从0开始_Java从零开始学二十一(集合List接口)
- 软件项目立项书_2019年度上海市软件和集成电路产业发展专项资金项目立项
- surface pro 6 黑苹果_微软Surface新款超薄触控笔抢鲜评测
- 常州win8如何禁用应用商店_Win8系统当中Windows defnedder安全软件应该如何禁用?...
- java string replace 重载_关于Java:如何使用replace(char,char)替换字符b的所有实例为空...
- Educational Codeforces Round 112 (Rated for Div. 2)(A-D)