基于 Vue 和 BMapGL 的地图应用场景

代码应用场景

这段代码适用于需要在 Vue 应用中集成百度地图 WebGL 版（BMapGL）的场景，可用于展示地图、标记点位、绘制图形等功能。例如，可以在物流管理系统中展示车辆位置，在旅游网站上展示景点分布，在房产网站上展示楼盘位置。

代码基本功能

这段代码实现了以下基本功能：

• 加载 BMapGL 地图并设置中心点和缩放级别
• 创建和添加点标记到地图上
• 加载必要的脚本和样式文件

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

1. 加载脚本和样式文件

async mounted() {
  await Promise.all([
    this.loadScripts([
      // 加载 BMapGL 相关脚本
      'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
      'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
      // 加载其他辅助脚本
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
      'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
      'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
      'https://mapv.baidu.com/gl/examples/static/common.js',
      'https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/geoJson.js',
      'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.min.js',
      'https://mapv.baidu.com/build/mapv.min.js',
      'https://bj.bcebos.com/v1/mapopen/api-demos/data/province.js',
      'https://bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/customgreen.js',
      'https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js',
      'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js',
      'https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js',
      'https://bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/mapstyleblack.js',
      'https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.141/dist/mapvgl.min.js',
    ]),
    this.loadStyles([
      'http://api.map.baidu.com/res/webgl/10/bmap.css',
      'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
    ]),
  ])
}

这段代码通过 loadScripts 和 loadStyles 方法加载了 BMapGL 相关的脚本和样式文件，确保了地图功能的正常运行。

2. 创建地图

var map = new BMapGL.Map('container')
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15)
map.enableScrollWheelZoom(true)

这段代码创建了一个 BMapGL 地图对象并将其添加到 #container 容器中，设置了地图的中心点和缩放级别，并启用了鼠标滚轮缩放功能。

3. 创建点标记

var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925))
var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915))
var marker3 = new BMapGL.Marker(new BMapGL.Point(116.395, 39.935))
var marker4 = new BMapGL.Marker(new BMapGL.Point(116.415, 39.931))
map.addOverlay(marker1)
map.addOverlay(marker2)
map.addOverlay(marker3)
map.addOverlay(marker4)

这段代码创建了四个点标记并将其添加到地图上，分别位于不同的位置。

总结与展望

通过这段代码，可以在 Vue 应用中轻松集成 BMapGL 地图，并实现基本的地图展示、点标记添加等功能。

未来，该地图功能可以进一步拓展和优化，例如：

• 添加更多地图操作功能，如缩放、平移、旋转等
• 集成地理信息数据，展示热力图、轨迹线等可视化效果
• 与其他 Vue 组件结合，实现更复杂的交互式地图应用