百度地图自定义POI示例

原创于 2025-07-01 19:26:14 发布 · 431 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #百度 #交互

百度地图自定义POI示例

这个示例展示了如何使用百度地图JavaScript API GL来添加自定义POI（兴趣点）标注。

在这里插入图片描述

功能说明

使用 addLabelsToMapTile 方法添加自定义POI标注
支持添加文字标注和图标标注
提供添加和清除标注的功能
支持自定义标注样式（字体大小、颜色、光晕等）

关键点说明

坐标系统：
- 地图初始化使用经纬度坐标：new BMapGL.Point(116.41869196404, 39.901641043953)
- 添加标注使用墨卡托坐标：new BMapGL.Point(12957961.232564565, 4822048.673415739)
标注配置：
- displayRange: [13, 21] - 控制标注在什么缩放级别范围内显示
- textMargin: 8 - 文字边距
- direction: 3/4 - 标注方位（3表示右侧，4表示下方）
- uid - 标注的唯一标识符

样式设置：

style: {
    fontSize: 30,
    haloSize: 2,
    color: 'rgba(80,92,88,1)',
    strokeColor: '#fff'
}

使用说明

引入百度地图API：

<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

创建地图容器：
```
<div id="container"></div>
```

初始化地图：

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.41869196404, 39.901641043953);
map.centerAndZoom(point, 14);
map.enableScrollWheelZoom();