百度地图 自定义弹窗 InfoBox
infoBox文档地址: https://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html
infobox依赖文件可以到这里下载:https://gitee.com/shiguangliangyi/dependent-file/blob/00d37b1ba2ffbbfd309305449711b4e7378878b5/infobox.js
测试代码如下:
// 定义html字符串
let htmlStr = `<div>测试InfoBox内容</div>` // 创建infoBox
let infoBox = new BMapLib.InfoBox(window.map, htmlStr, {
boxStyle: {
width: "240px",
marginleft: "6px",
backgroundColor: "white"
}, // 定义infoBox的style,
offset: new BMap.Size(10, 40),
closeIconMargin: "12px 8px 4px 4px", //关闭按钮的margin
closeIconUrl: "", //关闭按钮的url地址
align: INFOBOX_AT_TOP, //infobox显示位置,目前只有上和下,基于哪个位置进行定位,取值为[INFOBOX_AT_TOP,INFOBOX_AT_BOTTOM]
}) infoBox.enableAutoPan(); // 是否启动自动平移功能
infoBox.open(marker) // 在某个marker处或者point处打开infobox
百度地图 自定义弹窗 InfoBox的更多相关文章
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
		ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ... 
- 百度地图自定义icon,定位偏移问题
		最近使用百度地图做一个调度系统,使用定义icon的marker,结果地图显示marker和实际位置偏移,最终参考文章: http://www.cnblogs.com/jz1108/archive/20 ... 
- 【Android】百度地图自定义弹出窗口
		我们使用百度地图的时候,点击地图上的Marker,会弹出一个该地点详细信息的窗口,如下左图所示,有时候,我们希望自己定义这个弹出窗口的内容,或者,干脆用自己的数据来构造这样的弹出窗口,但是,在百度地图 ... 
- 百度地图自定义Marker
		最近写了百度地图的Demo,所以总结下遇到的问题: 1.首先在百度地图中创建应用时用到 发布版SHA1是在Preferences下的Android下的Build中;2.在使用百度地图时,先要创建一个A ... 
- 百度地图InfoWindow弹窗圆角
		效果如下 使用CSS样式 /*地图标题*/ .BMap_pop div:nth-child(1) div { border-radius: 8px 0 0 0; } .BMap_pop div:nth ... 
- 百度地图API自定义地图
		http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ... 
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
		在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ... 
- 【百度地图API】自定义可编辑的交通路线
		原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘 ... 
- 如何在网中使用百度地图API自定义个性化地图
		<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ... 
- HTM L百度地图API 自定义工具地图实例
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ... 
随机推荐
- [namespace hdk] diff.h
			Example cth.txt 12345 54321 114514 hdk.txt 12345 54321 114514 #include"diff.h" using names ... 
- ServiceMesh 2:控制面和数据面的职责(图文总结)
			★ ServiceMesh系列 1 Service Mesh介绍 之前的章节我们详细介绍了ServiceMesh的基础知识. ServiceMesh 是最新一代的微服务架构,作为一个基础设施层,能够与 ... 
- 2020年度国产数据库:openGauss
			根据墨天轮2020年一年的数据库流行度得分趋势变化,我们选出了流行热度增长显著的数据库为2020年度国产数据库.恭喜 华为开源关系型数据库 openGauss 荣获 "2020年度国产数据库 ... 
- 07 - react 唯一修改state状态的方式 setState
			// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理:修改玩状态之后会调用 render 函数 impor ... 
- 全网最适合入门的面向对象编程教程:57 Python字符串与序列化-序列化与反序列化
			全网最适合入门的面向对象编程教程:57 Python 字符串与序列化-序列化与反序列化 摘要: Python 序列化与反序列化是将 Python 对象转换为字节流(序列化)以便存储或传输,和将字节流转 ... 
- kubernetes中pod的隔离策略
			配置容器级别的安全控制 使用宿主机的网络模式 可以通过设置pod的spec的hostNetwork参数为true开启容器的"host"network模式 spec: hostNet ... 
- Kubernetes 集成 KubeEdge 需要注意的问题汇总
			作者:朱含 近期小伙伴对在使用 KubeSphere v3.1 上集成边缘节点有不少疑问,这里说明下 guide 文档地址,然后可以把这方面的问题汇总在这里,方便后续的小伙伴排查问题,也欢迎大家继续补 ... 
- 云原生爱好者周刊:OCI 镜像管理新工具 — regclient
			云原生一周动态要闻: OpenKruise v1.0 发布 SlashData 最新报告:560 万开发者使用 Kubernetes,一年增长 67% WasmEdge 0.9.0 发布 Securi ... 
- NeuVector 会是下一个爆款云原生安全神器吗?
			近日一则<SUSE 发布 NeuVector:业内首个开源容器安全平台>的文章被转载于各大 IT 新闻网站.作为 SUSE 家族的新进成员,在 3 个月后便履行了开源承诺,着实让人赞叹.那 ... 
- h5+ 检测 APP 是否开启应用通知权限
			h5+ 检测 APP 是否开启应用通知权限 原文可查看此处,搜索 h5+ 检测 APP 是否开启应用通知权限 https://mp.weixin.qq.com/mp/profile_ext?actio ... 
