外观

快速开始 ​

安装 ​

bash
pnpm add @x-humanoid-cloud/bic-map
bash
npm install @x-humanoid-cloud/bic-map
bash
yarn add @x-humanoid-cloud/bic-map

CDN 方式 ​

如果你不使用构建工具，可以通过 CDN 直接引入：

html
<!-- 引入 BicMap CDN 包 -->
<script src="https://cdn.bic-map.com/bicMap.ext.min.js"></script>

注意： CDN 方式已打包 maplibre-gl、three.js、@turf/turf，无需额外引入。

基础地图创建 ​

Vue3 项目 ​

vue
<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 () => {
  await bicMap.init()

  map = bicMap.createMap({
    container: 'myMap',
    center: [116.3912, 39.9073],
    zoom: 13,
    style: 'mapbox://styles/mapbox/light-v11'
  })

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

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

原生 HTML ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>BicMap 示例</title>
  <style>
    #myMap { width: 100vw; height: 100vh; }
  </style>
  <script src="https://cdn.bic-map.com/bicMap.ext.min.js"></script>
</head>
<body>
  <div id="myMap"></div>
  <script type="module">
    await bicMap.init()

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

    map.on('load', () => {
      bicMap.addZoomControl(map, 'bottom-right')
    })
  </script>
</body>
</html>

添加机器人标记 ​

js
map.on('load', () => {
  const robotController = bicMap.addRobotMarkers(map, [
    {
      id: 'robot-001',
      name: '配送机器人',
      lngLat: [116.3912, 39.9073],
      rotation: 90
    }
  ], {
    svgPath: '/assets/robot.svg',
    size: 30,
    showLabels: true,
    onClick: (info) => {
      console.log('点击机器人:', info)
    }
  })

  // 实时更新机器人位置
  setInterval(() => {
    robotController.updateRobot(0, {
      lngLat: [116.3912 + Math.random() * 0.001, 39.9073],
      rotation: Date.now() % 360
    })
  }, 1000)
})

下一步 ​