jspopularGL

文本标注

更新时间：2020年08月07日

简介

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。

本节重点介绍一下如何向地图添加文本标注，以及与地图相关的一些交互。

DEMO详情

提供的文本标注

Label：一个用来往地图上添加文本标注的类，您可以自定义标注的文本内容。

Label使用详情请见类参考

添加文本标注

API提供了默认的标注样式，您也可以通过setStyle来指定自定义样式。

1参考展示地图创建基本地图

<!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=您的密钥"></script>
    <title>地图展示</title>
</head>
<body></body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

2向地图中添加文本标注

如下示例，向地图添加了一个文本标注，并使用默认的标注样式：

var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})  
map.addOverlay(label);                        // 将标注添加到地图中

3修改文本标注样式

通过setStyle类可实现自定义文本标注的样式，其参数为一个表示样式的JavaScript对象常量。

注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor。

var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,
    offset: new BMapGL.Size(10, 20)
})  
map.addOverlay(label);                        // 将标注添加到地图中
label.setStyle({                              // 设置label的样式
    color: '#000',
    fontSize: '30px',
    border: '2px solid #1E90FF'
})

4监听标注事件

JSAPI支持监听覆盖物的事件。

label.addEventListener("click", function(){  
    alert("您点击了标注");  
});

文档全面上新