百度地图添加文本标注+信息窗口
效果图:
网页效果:添加文字标签
需求:
- 页面展示marker
- marker旁边有标注
- 点击marker时有弹窗提示具体信息
- 鼠标移除时关闭弹窗提示
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>添加文字标签</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><style>body,html,#container {overflow: hidden;width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}</style><script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=yourKey"></script>
</head>
<body><div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);
map.enableScrollWheelZoom(true);
var pointArr = [{id: 1,belong: 1,lat: 39.925,lng: 116.404,title: '红色坐标',message: '我是红色坐标',popTitle: '标题1'},{id: 2,belong: 2, // 判断是显示红色坐标还是蓝色坐标lat: 39.915,lng: 116.404,title: '蓝色坐标', // 有右侧文本标注message: '我是蓝色坐标', // 弹窗提示内容popTitle: '标题2' // 弹窗标题}
]
var labelStyle = {color: 'blue',borderRadius: '5px',borderColor: '#ccc',padding: '3px',fontSize: '12px',height: '20px',lineHeight: '20px',fontFamily: '微软雅黑'
}
let imgRed = 'https://s3.bmp.ovh/imgs/2022/04/11/2b6652b74fff473f.png'
let imgBlue = 'https://s3.bmp.ovh/imgs/2022/04/11/1115f7e5f6d32c04.png'
pointArr.forEach((item, index)=>{var myIcon = new BMapGL.Icon(item.belong === 1?imgRed:imgBlue, new BMapGL.Size(32, 32)) // 根据条件判断icon的图标var marker = new BMapGL.Marker(new BMapGL.Point(item.lng, item.lat),{ icon: myIcon }); // 将图标和坐标进行关联map.addOverlay(marker); // 将关联好的结果进行放置 var opts = {position: new BMapGL.Point(item.lng, item.lat), // 指定文本标注所在的地理位置offset: new BMapGL.Size(30, -30) // 设置文本偏移量};var label = new BMapGL.Label(item.title, opts); // 创建文本标注对象label.setStyle(labelStyle); // 自定义文本标注样式map.addOverlay(label);var infoWindow = new BMapGL.InfoWindow(item.message, { // 创建信息窗口对象width : 200, // 信息窗口宽度height: 100, // 信息窗口高度title : item.popTitle , // 信息窗口标题})marker.addEventListener("click", function(){ // 创建点击事件 map.openInfoWindow(infoWindow, opts.position); //开启信息窗口}); marker.addEventListener("onmouseout", function(){ // 创建点击事件 map.closeInfoWindow(); //关闭信息窗口});
})
</script>
百度地图添加文本标注+信息窗口相关推荐
- 百度地图添加文本标注显示文字
一.业务场景 通过百度地图API的 label 添加文本覆盖物,用于显示 marker点位的描述信息.并控制 label 的显示,鼠标移入点位的时候显示文字,不移入点位的时候不显示文字.去掉背景颜色框 ...
- 百度地图添加文本标记
添加文本标记 还是很有用处的 用来给我们的地图上进行标记 然后给用户一些提示啥的 这个百度直接给我 封装好了 api 直接调用就显示出来了 官网介绍也很清晰 我在自己的博客中保存一份然后 ...
- 百度地图api html信息窗口,百度地图 javascript api自定义信息窗口
百度 js api中存在infoWindow的类,就是marker 点击后显示的信息窗口, 他存在一下问题 1.在map中只能显示一个infowindow, 2.该信息窗口的样式无法修改,显示的内容具 ...
- 5. 百度地图api1.0-添加信息窗口
1. 首先先定义信息窗口 可以定义 width宽度 和 height高度 和 title标题 var opts = {width: 250, // 信息窗口宽度height: 100, // 信息窗口 ...
- 百度地图添加多个marker点位标注
百度地图添加多个marker点位标注 新建一个TMap.js文件 export function TMap(key) {return new Promise(function (resolve, re ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- 百度地图添加标识物,并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
- 解决百度地图多个标注覆盖不能响应点击的问题
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
- 根据百度地图经纬度获取位置信息
/*** 根据百度地图经纬度获取位置信息 **/ public class BaiduMapUtils {// 百度地图秘钥static String ak = "此处添加你的百度地图秘钥& ...
最新文章
- 数据库生成T4模版在代码生成中的应用心得
- python flask flash消息闪现
- LeetCode 21 合并两个有序链表
- 云数据仓库的未来趋势:计算存储分离
- Solaris 网络 配置
- matlab实现qr分解
- “汇乐缘”:甜蜜的阴谋?【zt】
- opencv怎么安装?opencv下载安装教程
- 微信公众号接口开发--回复消息
- 汽车诊断系统总线协议规范知识汇总
- mdx和mdd格式的词典解析Android JNI方式实现
- iOS description方法的使用介绍
- 用“分区助手”(PartAssist)给C盘扩容
- Codeforces Beta Round #14 (Div. 2) E. Camels
- fundamentals\java\java8新特性-Lambda(译自oracle官网)
- (一,1NN-QI)神经网络与深度学习——吴恩达深度学习配套笔记
- 放弃美国高校博导身份,选择在硅谷创业,只因有颗“不安分”的心
- xp系统访问共享服务器提示无网络路径,XP提示“无任何网络提供程序接受指定的网络路径”如何解决...
- AOP -- 注解 @Aspect 、@Pointcut
- JsTreeの使用-yellowcong