文档

百度地图开放平台 | 百度地图API SDK | 地图开发

react-bmap

基于百度地图JavaScript API封装的React组件库。

React-BMapGL（GL 版 React 组件库）

基于百度地图JavaScript GL版API封装的React组件库。如果想要使用旧版的2D地图的话，使用react-bmap。如果您对使用地图API完全陌生，建议使用这个库之前先了解百度地图JavaScript GL API，了解一些地图的基本概念，并申请开发者ak。

百度地图开放平台 - 开源库

百度地图JavaScript开源库，是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库，帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

百度地图个性在线编辑器

个性化地图 - 控制台 | 百度地图开放平台

百度地图坐标转换服务

坐标转换服务是一类Web API接口服务；
用于将常用的非百度坐标转换成百度地图中使用的坐标，并可将转化后的坐标在百度地图JavaScript API、Web服务API等产品中使用。

拾取坐标系统 - 百度

获取地区坐标。

百度地图开放平台 - 示例中心

地图JS API示例中心，以示例的形式介绍百度地图JS API如何使用，为开发者提供丰富的应用参考。

覆盖物显示隐藏

hideOverlay()

百度地图 API 查询

自定义配置

如何设置背景/底色透明度？

百度地图没有配置可以直接设置透明度的，但是可以通过个性化地图配置设置土地、河流、建筑等透明度来实现整个地图的透明。
注意：设置完透明后还要将绑定地图的 dom 样式加上 background-image: initial !important; 来去除百度地图自带的白色背景图才能真正透明。
个性化地图 - 控制台 | 百度地图开放平台
同时参考 androidsdk - 设置透明度样式 | 百度地图API SDK

透明度生效原则
1.当前版本透明度不支持单独设置，与颜色样式一起设置。该字段的值使用十六进制，范围为：[0x00, 0xff]，默认值为0xff，即不透明。为兼容以前的颜色样式，SDK旧版本的样式值将自动补齐透明度值，默认0xff，即不透明。
2.visibility 设置 off 即为透明。

设置土地透明度样式

  2.   {
  3.     "featureType": "land",
  4.     "elementType": "geometry",
  5.     "stylers": {
  6.       "visibility": "off", // 方法一：visibility 设置 off 即为透明
  7.       "color": "#09122000" // 方法二：color 设置最后两位为 00 即为同名
  8.     }
  9.   },

开发

定义 ts 类型

在 d.ts 文件中添加 declare const BMap: any;

遇到的问题

BMapLib.MarkerClusterer is not a constructor

使用聚合 marker 时报错，原因是需要额外的 js 开源库支持，必须将两个源文件都进行添加。

  1. 'https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js',
  2. 'https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js',

添加地图标注后，图标下面多了一块颜色

百度地图添加自定义图片，当使用多个不同的图标创建地图 Icon 时，百度地图会自动将所有图标生成一个雪碧图，所以如果设置的宽高比例不一致的话，就会出现其他图标内容。
image.png