Amap JavaScript API 2.0

https://lbs.amap.com/api/javascript-api-v2/
Admin
Amap JavaScript API 2.0 is a fourth-generation web mapping engine built on WebGL, providing...
Tokens:140,823
Snippets:853
Trust Score:10
Update:2 days ago
Show doc for...
Tokens:
Raw
### 直接复制 Skills 文件

Source: https://lbs.amap.com/api/javascript-api-v2/skill

通过复制命令将 Skills 文件复制到项目目录。

```bash
cp -r /path/to/jsapi-skills/amap-jsapi-skill .cursor/skills/
```

--------------------------------

### Get current Scale unit

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/englishmap

Uses getUnit() to retrieve the current unit type of the Scale control.

```javascript
scaleControl.getUnit(); // 获取当前单位类型
```

--------------------------------

### 软链接 Skills 文件

Source: https://lbs.amap.com/api/javascript-api-v2/skill

通过软链接将 Skills 文件链接到项目目录，便于更新。包含 macOS/Linux 和 Windows 命令。

```bash
# macOS / Linux
ln -s /path/to/jsapi-skills/amap-jsapi-skill .cursor/skills/amap-jsapi-skill

# Windows (以管理员身份运行 CMD)
mklink /D .cursor\skills\amap-jsapi-skill C:\path\to\jsapi-skills\amap-jsapi-skill
```

--------------------------------

### Get current Scale language code

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/englishmap

Uses getLanguageCode() to retrieve the current language code of the Scale control.

```javascript
scaleControl.getLanguageCode(); // 获取当前语言代码
```

--------------------------------

### 创建 Skills 目录

Source: https://lbs.amap.com/api/javascript-api-v2/skill

在项目根目录下创建 .cursor/skills/ 文件夹，用于存放自定义技能。

```bash
mkdir -p .cursor/skills
```

--------------------------------

### Get current high contrast setting

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/englishmap

Uses getHighContrast() to retrieve whether the Scale control currently has a high-contrast stroke.

```javascript
scaleControl.getHighContrast(); // 获取当前是否添加描边
```

--------------------------------

### AMap.Map Methods Summary

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/state

Summary of AMap.Map methods for setting and getting the map center and zoom level, and fitting the view to overlays.

```APIDOC
## AMap.Map Methods

### setCenter()
- **Description**: Sets the map center point when called with parameters; returns the current center point when called without parameters.
- **Parameters**: Optional - LngLat object or [lng, lat] array.
- **Returns**: LngLat object when called without parameters.

### getZoom()
- **Description**: Sets the map zoom level when called with parameters; returns the current zoom level when called without parameters.
- **Parameters**: Optional - Number zoom level.
- **Returns**: Number zoom level when called without parameters.

### setZoomAndCenter()
- **Description**: Zooms the map to a specified level and centers it at a specified point.
- **Parameters**: zoom (Number), center (LngLat or [lng, lat]).

### setFitView()
- **Description**: Automatically adjusts the map viewport to fit all overlays or a specified set of overlays.
- **Parameters**: overlays (Array<Overlay>), immediately (Boolean), avoid (Array<Number>), maxZoom (Number) - all optional.

### Example Usage
```javascript
// Set center and zoom
map.setCenter([116.397428, 39.90923]);
map.setZoom(12);

// Get current center and zoom
var center = map.getCenter();
var zoom = map.getZoom();

// Set both center and zoom
map.setZoomAndCenter(12, [116.397428, 39.90923]);

// Fit view to all overlays
map.setFitView();
```
```

--------------------------------

### 克隆 Skills 仓库

Source: https://lbs.amap.com/api/javascript-api-v2/skill

使用 Git 克隆高德地图 JSAPI Skills 仓库并进入目录。

```bash
git clone https://github.com/AMap-Web/amap-skills

cd jsapi-skills
```

--------------------------------

### 异步加载地图旋转和缩放插件（AMap.ControlBar 和 AMap.ToolBar）

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/3d-map

使用 AMap.plugin() 异步加载 ControlBar（旋转）和 ToolBar（缩放）插件，并通过 map.addControl() 添加到地图。插件位置通过 position 属性设置。

```javascript
AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () { //异步加载插件
  var controlBar = new AMap.ControlBar({ //控制地图旋转插件
      position: {
          right: '10px',
          top: '10px'
      }
  });
  map.addControl(controlBar);
  var toolBar = new AMap.ToolBar({ //地图缩放插件
      position: {
          right: '40px',
          top: '110px'
      }
  });
  map.addControl(toolBar)
});
```

--------------------------------

### AMap.Scale

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/englishmap

The AMap.Scale class represents the scale control. It provides methods to set and get the language, unit, and high contrast options.

```APIDOC
## AMap.Scale

### Description
The AMap.Scale class represents the scale control. It provides methods to set and get the language, unit, and high contrast options.

### Properties
- **languageCode** (String) - Initial control language. Default: `zh` (Simplified Chinese). Optional: `en` (English), `es` (Spanish), `pt` (Portuguese), `fr` (French), `de` (German), `th` (Thai), `ja` (Japanese), `ko` (Korean), `tr` (Turkish), `it` (Italian), `ru` (Russian), `ms` (Malay), `id` (Indonesian), `vi` (Vietnamese).
- **unit** (String) - Unit for the scale control. Default: `metric` (metric units). Optional: `imperial` (imperial units).
- **highContrast** (Boolean) - Whether to enable outline. Default: `false` (no outline), `true` (enable outline).

### Methods
- **setLanguageCode('string')** (Function) - Sets the control language. See `languageCode` parameter for options.
- **getLanguageCode()** (Function) - Gets the current control language.
- **setUnit('string')** (Function) - Sets the unit for the scale control. Default: `metric` (metric units). Optional: `imperial` (imperial units).
- **getUnit()** (Function) - Gets the current unit of the scale control.
- **setHighContrast(boolean)** (Function) - Sets whether to enable outline. Default: `false` (no outline), `true` (enable outline).
- **getHighContrast()** (Function) - Gets whether outline is enabled.
```

--------------------------------

### 显示默认室内图层并监听 indoor_create 事件

Source: https://lbs.amap.com/api/javascript-api-v2/guide/layers/official-layers

通过设置 showIndoorMap: true 启用默认室内图层，监听 indoor_create 事件获取室内图层实例，并调用 showIndoorMap 方法显示指定 POI 的室内地图。

```javascript
//创建地图，设置室内地图图层可见
var map = new AMap.Map("container", {
  center: [116.519942, 39.924677], //地图中心点
  showIndoorMap: true, //是否自动展示室内地图
  zoom: 18, //地图级别
});
//监听地图 indoor_create 事件，室内地图图层创建回调中可获取室内地图图层实例
map.on("indoor_create", function () {
  map.indoorMap.showIndoorMap("B000A8VT15", 4); //显示指定 POI 的室内地图,第一个参数为建筑物 POIID，第二个参数为楼层
});
```

--------------------------------

### AMap.DragRoute plugin for draggable routes

Source: https://lbs.amap.com/api/javascript-api-v2/guide/services/navigation

Use AMap.DragRoute to enable dragging of a driving route. The path array contains the start, waypoints, and end coordinates, supporting up to 16 waypoints. The plugin only works on desktop browsers.

```javascript
AMap.plugin("AMap.DragRoute", function () {
  //path 是驾车导航的起、途径和终点，最多支持16个途经点
  var path = [];
  path.push([116.303843, 39.983412]);
  path.push([116.321354, 39.896436]);
  path.push([116.407012, 39.992093]);
  var route = new AMap.DragRoute(map, path, 0);
  //查询导航路径并开启拖拽导航
  route.search();
});
```

--------------------------------

### 获取覆盖物：getAllOverlays 方法

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/map-layer

使用 getAllOverlays(type) 方法获取已添加的覆盖物。type 参数可选，包括 marker、circle、polyline、polygon，缺省时返回所有类型。

```javascript
//获取所有已经添加的覆盖物
map.getAllOverlays();
//只获取所有已经添加的 marker
map.getAllOverlays('marker');
```

--------------------------------

### 创建默认信息窗体

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/info-window

创建一个默认样式的信息窗体，设置content属性为字符串拼接的DOM元素，并指定锚点为top-left。使用infoWindow.open(map, map.getCenter())打开信息窗体。

```javascript
//信息窗体的内容
var content = [
  "<div><b>高德软件有限公司</b>",
  "电话 : 010-84107000   邮编 : 100102",
  "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
];

//创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({
  content: content.join("<br>"), //传入字符串拼接的 DOM 元素
  anchor: "top-left",
});

//打开信息窗体
infoWindow.open(map, map.getCenter()); //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
```

--------------------------------

### 使用 setFitView() 调整视野以包含所有覆盖物

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/state

创建一条折线和两个点标记，然后调用 setFitView() 自动缩放地图以包含所有覆盖物。setFitView() 可接受覆盖物数组、是否动画、避让宽度和最大缩放级别等参数，均可缺省。

```javascript
//创建一条折线覆盖物
var path = [
  new AMap.LngLat("116.368904", "39.913423"),
  new AMap.LngLat("116.382122", "39.901176"),
  new AMap.LngLat("116.387271", "39.912501"),
  new AMap.LngLat("116.398258", "39.904600"),
];
var polyline = new AMap.Polyline({
  path: path,
  borderWeight: 2, //线条宽度，默认为1
  strokeColor: "red", //线条颜色
  lineJoin: "round", //折线拐点连接处样式
});
map.add(polyline);

//创建两个点标记
var marker1 = new AMap.Marker({
  position: new AMap.LngLat(117.39, 39.9), //经纬度对象
});
var marker2 = new AMap.Marker({
  position: new AMap.LngLat(118.39, 39.9), 
});
map.add(marker1);
map.add(marker2);

//自动适配到合适视野范围
//无参数，默认包括所有覆盖物的情况
map.setFitView();
//传入覆盖物数组，仅包括 polyline 和 marker1 在地图视野范围，marker2 不在地图视野范围
map.setFitView([polyline, marker1]); //简写
//map.setFitView([polyline, marker1], false, [60, 60, 60, 60], 12); //完整写法
```

--------------------------------

### 使用 AMap.IndoorMap 插件创建独立室内图层

Source: https://lbs.amap.com/api/javascript-api-v2/guide/layers/official-layers

通过异步插件加载 AMap.IndoorMap，创建独立室内图层并隐藏默认室内图层。设置 alwaysShow: true 可在无矢量底图时显示，最后调用 showIndoorMap 显示指定 POI。

```javascript
//加载室内图层插件
AMap.plugin(["AMap.IndoorMap"], function () {
  var indoorMap = new AMap.IndoorMap({ alwaysShow: true });
  //设定在没有矢量底图的时候也显示，默认情况下室内图仅在有矢量底图的时候显示
  var map = new AMap.Map("container", {
    showIndoorMap: false, //隐藏地图自带的室内地图图层
    layers: [indoorMap, AMap.createDefaultLayer()], //地图图层的数组
  });
  indoorMap.showIndoorMap("B000A856LJ"); //显示指定 POI 的室内地图
});
```

--------------------------------

### 创建菜单实例

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/context-menu

创建AMap.ContextMenu实例。

```javascript
var contextMenu = new AMap.ContextMenu();
```

--------------------------------

### AMapLoader.load 异步加载多个插件

Source: https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins

通过加载 loader.js 并使用 AMapLoader.load 方法，在 plugins 参数中指定多个插件进行异步加载。

```html
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "「你申请的应用 Key」", //申请好的 Web 端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Scale"], //需要使用的的插件列表
  }).then((AMap) => {
    const map = new AMap.Map("container"); //创建地图实例
    var toolbar = new AMap.ToolBar(); //创建工具条插件实例
    map.addControl(toolbar); //添加工具条插件到页面
    var scale = new AMap.Scale();
    map.addControl(scale);
  });
</script>
```

--------------------------------

### 使用AMap.TileLayer.Flexible创建灵活切片图层

Source: https://lbs.amap.com/api/javascript-api-v2/guide/layers/canvaslayer

使用该图层可实现自定义每个切片的内容。通过指定TileLayer.Flexible类的createTile属性传入切片内容，返回值为切片图片或canvas。注意img.crossOrigin必须设置为'anonymous'，同时图片要有跨域头。

```JavaScript
//创建地图
var map = new AMap.Map("container", {
  zoom: 15,
  center: [116.335183, 39.941735],
});
//创建 Flexible 图层
var flexibleLayer = new AMap.TileLayer.Flexible({
  cacheSize: 30, //缓存瓦片数量
  opacity: 0.3, //透明度
  createTile: function (x, y, z, success, fail) {
    /**
     * 自定义切片属性，返回值为切片图片或 canvas
     * @param x: 切片横向编号
     * @param y: 切片纵向编号
     * @param z: 切片层级
     * @param success: 创建成功回调
     * @param fail: 创建失败回调
     */
    if ((x + y) % 3) {
      fail();
      return;
    }

    var img = document.createElement("img");
    img.onload = function () {
      success(img);
    };
    img.crossOrigin = "anonymous"; //必须添加，同时图片要有跨域头
    img.onerror = function () {
      fail();
    };

    img.src = "https://a.amap.com/jsapi_demos/static/images/amap.png";
  },
});

//将图层添加到地图
map.add(flexibleLayer);
```

--------------------------------

### 创建插件实例 (AMap.ToolBar)

Source: https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins

在回调函数中实例化工具条插件，并添加到地图上。

```javascript
//在回调函数中实例化插件
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面
```

--------------------------------

### 创建默认图层 (AMap.createDefaultLayer)

Source: https://lbs.amap.com/api/javascript-api-v2/tutorails/display-a-layer

使用AMap.createDefaultLayer创建默认图层，可配置可见级别、可见性、透明度和叠加层级。

```javascript
const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});
```

--------------------------------

### AMap.Weather.getLive

Source: https://lbs.amap.com/api/javascript-api-v2/guide/services/weather

通过城市名称或区域编码查询目标城市、区域的实时天气状况。

```APIDOC
## AMap.Weather.getLive

### Description
通过城市名称、区域编码（如杭州市、330100），查询目标城市、区域的实时天气状况。

### Method
GET

### Endpoint
AMap.Weather.getLive

### Parameters
#### Query Parameters
- **city** (String) - Required - 城市名称或区域编码，如"杭州市"或"330100"
- **callback** (Function) - Required - 回调函数，参数为(err, data)，err正确时返回null，data返回实时天气数据

### Request Example
```javascript
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getLive("杭州市", function (err, data) {
    console.log(err, data);
    //err 正确时返回 null
    //data 返回实时天气数据，返回数据见下表
  });
});
```

### Response
#### Success Response
- **info** (String) - 成功状态描述
- **province** (String) - 省份名
- **city** (String) - 城市名
- **adcode** (String) - 区域编码
- **weather** (String) - 天气现象，详见天气对照表
- **temperature** (Number) - 实时气温，单位：摄氏度
- **windDirection** (String) - 风向，风向编码对应描述
- **windPower** (Number) - 风力，风力编码对应风力级别，单位：级
- **humidity** (String) - 空气湿度（百分比）
- **reportTime** (String) - 数据发布的时间

#### Response Example
```json
{
  "info": "OK",
  "province": "浙江省",
  "city": "杭州市",
  "adcode": "330100",
  "weather": "晴",
  "temperature": 25,
  "windDirection": "东风",
  "windPower": 3,
  "humidity": "60%",
  "reportTime": "2024-01-22 10:00:00"
}
```
```

--------------------------------

### 绑定右键菜单事件

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/context-menu

使用contextMenu.open(map, position)方法打开右键菜单，map为地图实例，position为弹出位置。

```javascript
//地图绑定鼠标右击事件——弹出右键菜单
map.on('rightclick', function (e) {
  contextMenu.open(map, e.lnglat);
});
```

--------------------------------

### 自定义主题 CSS (.amap-ui-control-theme-my-red)

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/toolbar

定义缩放控件和图层切换控件的自定义主题样式，通过类名 .amap-ui-control-theme-my-red 设置背景色、阴影和文字颜色。

```css
.amap-ui-control-theme-my-red {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: red;
  color: #fff;
}
```

--------------------------------

### 项目目录结构示例

Source: https://lbs.amap.com/api/javascript-api-v2/skill

配置完成后项目目录结构示例，展示 .cursor/skills/ 下的文件组织。

```text
your-project/
├── .cursor/
│   └── skills/
│       └── amap-jsapi-skill/
│           ├── SKILL.md
|           └── api
|               |——map.md
|               |——layers.md
│           └── references/
│               ├── map-init.md
│               ├── marker.md
│               ├── security.md
│               └── ...
├── src/
├── package.json
└── ...
```

--------------------------------

### 异步加载并添加缩放工具条控件

Source: https://lbs.amap.com/api/javascript-api-v2/tutorails/add-plugin

通过 AMap.plugin 按需引入 AMap.ToolBar 控件，实例化后使用 map.addControl 添加到地图。

```javascript
//异步加载控件
AMap.plugin('AMap.ToolBar',function(){ 
  var toolbar = new AMap.ToolBar(); //缩放工具条实例化
  map.addControl(toolbar); //添加控件
});
```

--------------------------------

### 加载 BasicControl 并添加缩放和图层切换控件

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/toolbar

通过 AMapUI.loadUI 加载 BasicControl，添加缩放控件（含显示 Zoom 值）和图层切换控件，并设置位置和主题。

```javascript
AMapUI.loadUI(["control/BasicControl"], function (BasicControl) {
  //添加一个缩放控件
  map.addControl(
    new BasicControl.Zoom({
      position: "lt", //left top，左上角
    })
  );

  //缩放控件，显示 Zoom 值
  map.addControl(
    new BasicControl.Zoom({
      position: "lb", //left bottom, 左下角
      showZoomNum: true, //显示zoom值
    })
  );

  //图层切换控件
  map.addControl(
    new BasicControl.LayerSwitcher({
      position: "rt", //right top，右上角
      theme: "my-red", //主题样式 my-red 为 css 的 class 名
    })
  );
});
```

--------------------------------

### 创建并开启多边形编辑器 PolygonEditor

Source: https://lbs.amap.com/api/javascript-api-v2/guide/amap-polygon/polygonEditor

通过 map.plugin 引入 AMap.PolygonEditor 插件，实例化编辑器并传入地图和多边形实例，然后调用 open() 开启编辑模式。

```javascript
//引入多边形编辑器插件
map.plugin(["AMap.PolygonEditor"], function () {
  //实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
  var polygonEditor = new AMap.PolygonEditor(map, polygon);
  //开启编辑模式
  polygonEditor.open();
});
```

--------------------------------

### 经纬度坐标转容器坐标 map.lngLatToContainer

Source: https://lbs.amap.com/api/javascript-api-v2/guide/transform/coord_trans

将经纬度坐标转换为容器像素坐标。需要先创建地图，然后构造 AMap.LngLat 对象并传入 map.lngLatToContainer 方法，返回 AMap.Pixel 对象。

```javascript
//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4
});

//要转换的地理经纬度坐标
var longitude = 116.4;
var latitude = 39.9;

//构造成 AMap.LngLat 对象后传入
var lnglat = new AMap.LngLat(longitude, latitude);

// 获得 AMap.Pixel 对象
var pixel = map.lngLatToContainer(lnglat);  
//console.log(pixel.x, pixel.y) //即为经纬度在 #container 上对应的像素坐标
```

--------------------------------

### 实时天气查询：AMap.Weather.getLive

Source: https://lbs.amap.com/api/javascript-api-v2/guide/services/weather

加载 AMap.Weather 插件并创建实例，调用 getLive 方法查询指定城市（如杭州市）的实时天气。回调中 err 为 null 表示成功，data 包含实时天气数据。

```javascript
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getLive("杭州市", function (err, data) {
    console.log(err, data);
    //err 正确时返回 null
    //data 返回实时天气数据，返回数据见下表
  });
});
```

--------------------------------

### 控制缩放工具条显示和隐藏

Source: https://lbs.amap.com/api/javascript-api-v2/tutorails/add-plugin

调用 toolbar.show() 和 toolbar.hide() 方法控制控件的显示和隐藏。

```javascript
toolbar.show(); //缩放工具展示
toolbar.hide(); //缩放工具隐藏
```

--------------------------------

### 构造折线编辑对象并开启编辑状态

Source: https://lbs.amap.com/api/javascript-api-v2/guide/amap-line/line-editor

引入折线编辑器插件，实例化折线编辑器并开启编辑模式。polylineEditor.open() 为开始编辑对象的方法，polylineEditor.close() 可结束编辑。

```JavaScript
//引入折线编辑器插件
map.plugin(["AMap.PolylineEditor"], function () {
  //实例化折线编辑器，传入地图实例和要进行编辑的折线实例
  polylineEditor = new AMap.PolylineEditor(map, polyline);
  //开启编辑模式
  polylineEditor.open();
});
```

--------------------------------

### 创建标准图层并添加到地图

Source: https://lbs.amap.com/api/javascript-api-v2/guide/layers/official-layers

使用 AMap.createDefaultLayer 创建标准图层，并设置 zooms、visible、opacity、zIndex 属性。通过地图的 layers 属性将图层添加到地图。

```javascript
//创建标准图层
var layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});
//将图层添加到地图
var map = new AMap.Map("container", {
  layers: [layer], //地图图层的数组
});
```

--------------------------------

### 容器坐标转经纬度坐标 map.containerToLngLat

Source: https://lbs.amap.com/api/javascript-api-v2/guide/transform/coord_trans

将容器像素坐标转换为经纬度坐标。需要先创建地图，然后构造 AMap.Pixel 对象并传入 map.containerToLngLat 方法，返回 AMap.LngLat 对象。

```javascript
//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4,
});

//容器坐标，原点为左上角
var px = 600;
var py = 300;

//构造成 AMap.Pixel 对象后传入
var pixel = new AMap.Pixel(px, py);

//获得 AMap.LngLat 对象
var lnglat= map.containerToLngLat(pixel);  
//console.log(lnglat.lng, lnglat.lat) //即为 #container 像素坐标对应的地图经纬度坐标
```

--------------------------------

### 使用 AMap.Browser 判断浏览器 UA、平台及绘制特性

Source: https://lbs.amap.com/api/javascript-api-v2/guide/utils/browser

通过 AMap.Browser 的 ua、plat、isCanvas 和 isWebGL 属性获取浏览器 UA 信息、平台类型以及是否支持 Canvas 和 WebGL。

```javascript
//浏览器 UA 信息
var ua = AMap.Browser.ua;
//浏览器平台类型
var plat = AMap.Browser.plat;
//浏览器是否支持 Canvas
var canvas = AMap.Browser.isCanvas;
//浏览器是否支持 WebGL
var isWebGL = AMap.Browser.isWebGL;
```

--------------------------------

### map.setLayers() 设置图层

Source: https://lbs.amap.com/api/javascript-api-v2/guide/map/map-layer

使用setLayers()方法一次性设置多个图层，替换地图上原有图层。

```APIDOC
## map.setLayers() 设置图层

### Description
使用setLayers()方法一次性设置多个图层，替换地图上原有图层。

### Method
setLayers

### Endpoint
map.setLayers(layers)

### Parameters
- **layers** (Array<AMap.TileLayer>) - Required - 要设置的图层数组，将替换地图上原有图层。

### Request Example
```javascript
//构造官方卫星、路网图层
var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
//地图上设置图层
map.setLayers(layers);
```

### Response
无返回值。
```

--------------------------------

### 自定义信息窗体样式

Source: https://lbs.amap.com/api/javascript-api-v2/guide/overlays/info-window

为自定义信息窗体设置CSS样式，包括背景色、内边距、边框和图片定位。

```css
.info {
  background-color: #fff;
  text-align: center;
  padding: 10px;
  position: relative;
  border: 1px solid #b9b9b9;
}
.info img {
  width: 30px;
  height: 23px;
  position: absolute;
  left: calc(50% - 15px);
  bottom: -23px;
}
```
Tokens:
Raw