这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
写在前面：
-
本文为百度地图开发系列文章之一，
前期回顾：
- webGIS，基于百度地图的HelloWord实现
- 如何使用前端css代码去掉百度地图左下角的图标
- 使用百度地图绘制点、线、面 | Javascript
- 百度地图开发系列之个性化地图使用的2种方法
- 百度地图开发之信息窗口与文本标注的基础使用 (本篇讲解)
以上对应视频教程（博客与视频前面的序号是一一对应的）：
-
个人前端网站：zhangqiang.hk.cn
-
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
先看效果图，如首页图所示。
官网参考：lbsyun.baidu.com/index.php?t…
- 信息窗口：
信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。
- Label文本标注：
一个用来往地图上添加文本标注的类，您可以自定义标注的文本内容。
其源码如下，直接复制在html文件里面即可运行：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos">
</script>
<title>添加Label</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMapGL.Map("allmap");
var point = new BMapGL.Point(116.404, 39.925);
map.centerAndZoom(point, 15);
// 信息窗口
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var optsInfo = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "故宫博物院", // 信息窗口标题
message: "这里是故宫"
}
var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", optsInfo); // 创建信息窗口对象
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
// 文本标注
var optsLabel = {
position: point, // 指定文本标注所在的地理位置
offset: new BMapGL.Size(30, -30) //设置文本偏移量
}
var label = new BMapGL.Label("欢迎使用百度地图JSAPI WebGL版本", optsLabel); // 创建文本标注对象
label.setStyle({
color: 'red',
fontSize: '12px',
height: '20px',
lineHeight: '20px',
fontFamily: '微软雅黑'
});
map.addOverlay(label);
</script>
感谢看到末尾！
