地图初始化

bicMap.init()

初始化 BicMap 引擎，必须在创建地图前调用。

await bicMap.init()

返回值：Promise<void>

---

bicMap.createMap(options)

创建并返回地图实例。

const map = bicMap.createMap(options)

参数

参数	类型	必需	默认值	说明
container	string	✅	—	DOM 容器 ID，地图将渲染到此元素中
center	[number, number]	—	[0, 0]	初始中心点坐标 [经度, 纬度]，使用 WGS84
zoom	number	—	0	初始缩放级别，范围 0–22
style	string | Object	—	Mapbox Streets	地图样式 URL 或自定义样式对象
pitch	number	—	0	地图倾斜角度，范围 0–85°，用于 3D 效果
bearing	number	—	0	地图旋转角度，范围 0–360°
antialias	boolean	—	false	是否启用抗锯齿（开启会轻微降低性能）
backgroundColor	string	—	'#000000'	地图背景颜色（地图加载前显示）
maxZoom	number	—	22	最大缩放级别
minZoom	number	—	0	最小缩放级别
maxPitch	number	—	85	最大倾斜角度
maxBounds	[[w,s],[e,n]]	—	null	地图边界限制，格式：[[西南角], [东北角]]

示例

const map = bicMap.createMap({
  container: 'myMap',
  center: [116.3912, 39.9073],
  zoom: 13,
  pitch: 45,
  bearing: 0,
  antialias: true,
  style: 'mapbox://styles/mapbox/light-v11',
  maxZoom: 20,
  minZoom: 3
})

---

bicMap.addZoomControl(map, position)

向地图添加缩放控件。

参数

参数	类型	必需	默认值	说明
map	Map	✅	—	地图实例
position	string	—	'bottom-right'	位置：'top-left' / 'top-right' / 'bottom-left' / 'bottom-right'

示例

map.on('load', () => {
  bicMap.addZoomControl(map, 'bottom-right')
})

---

完整初始化示例

<template>
  <div id="myMap" style="width: 100%; height: 100vh;" />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import bicMap from '@x-humanoid-cloud/bic-map'

let map = null

onMounted(async () => {
  try {
    await bicMap.init()

    map = bicMap.createMap({
      container: 'myMap',
      center: [116.3912, 39.9073],
      zoom: 13,
      antialias: true
    })

    map.on('load', () => {
      bicMap.addZoomControl(map, 'bottom-right')
      console.log('地图加载成功！')
    })
  } catch (error) {
    console.error('初始化地图失败:', error)
  }
})

onBeforeUnmount(() => {
  map?.remove()
})
</script>