Vue 3 中集成百度地图 WebGL 室内图与地铁图

应用场景介绍

本代码示例展示了如何在 Vue 3 应用中集成百度地图 WebGL 室内图和地铁图,实现室内导航和地铁路线查询等功能。

代码基本功能介绍

此代码实现了以下功能:

  • 加载百度地图 WebGL 室内图
  • 加载百度地图地铁图
  • 启用鼠标滚轮缩放

功能实现步骤及关键代码分析说明

1. 加载脚本和样式

async loadScript() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = () => resolve('')
    script.onerror = (err) => reject(err)
    script.src = 'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303'
    document.body.appendChild(script)
  })
},
async loadSubwayScript() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = () => resolve('')
    script.onerror = (err) => reject(err)
    script.src = 'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303'
    document.body.appendChild(script)
  })
},
async loadStyle() {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'http://api.map.baidu.com/res/webgl/10/bmap.css'
    link.onload = resolve
    link.onerror = reject
    document.body.appendChild(link)
  })
},

这部分代码负责加载百度地图 WebGL 脚本、地铁图脚本和样式文件。通过创建 script 和 link 元素并将其附加到 body 元素,异步加载必要的资源。

2. 创建地图实例

var map = new BMapGL.Map('container', { showControls: true }) // 创建Map实例  并添加室内图控件

使用 BMapGL.Map 构造函数创建一个新的地图实例,并将容器元素的 ID 设置为 'container'。showControls 属性启用地图控件,例如缩放控件和类型控件。

3. 设置地图中心和级别

map.centerAndZoom(new BMapGL.Point(116.340739, 40.03592), 19) // 初始化地图,设置中心点坐标和地图级别

使用 centerAndZoom 方法设置地图的中心点和缩放级别。这里将中心点设置为北京天安门的经纬度,并将缩放级别设置为 19。

4. 启用鼠标滚轮缩放

map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

使用 enableScrollWheelZoom 方法启用鼠标滚轮缩放功能,允许用户通过滚动鼠标滚轮缩放地图。

总结与展望

通过这段代码的开发,我熟悉了百度地图 WebGL 室内图和地铁图的集成方法。未来,可以考虑对该功能进行以下拓展和优化:

  • **室内导航:**添加室内导航功能,允许用户在室内环境中规划路径。
  • **地铁路线规划:**集成地铁路线规划功能,允许用户查询地铁路线并获得换乘方案。
  • **POI 标记:**在室内图中添加 POI 标记,方便用户查找特定位置。
  • **动态加载:**根据用户当前位置动态加载室内图,优化性能。
登录
ECHO推荐
ScriptEcho.ai

用户批注

室内图展示

我要吐槽
新手指引
在线客服