基于百度地图 Web API 的个性化地图定制

应用场景介绍

本代码旨在利用百度地图 Web API，为用户提供定制化的地图体验。用户可以通过代码在浏览器中加载百度地图，并根据需要添加各种叠加物、标注和交互功能，从而创建满足特定需求的地图应用。

代码基本功能介绍

该代码的主要功能包括：

加载百度地图 Web API
添加自定义 canvas 叠加物
添加文本标注
实现地图点击事件监听
提供异步加载脚本和样式表的方法

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

加载百度地图 Web API

async mounted() {
  await Promise.all([
    this.loadScripts([
      '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',
      // 其他所需脚本
    ]),
    this.loadStyles([
      'http://api.map.baidu.com/res/webgl/10/bmap.css',
      // 其他所需样式表
    ]),
  ])

  const BMapGL = window.BMapGL

  var map = new BMapGL.Map('container')
  // ...
}

在 mounted 生命周期钩子中，首先加载必要的脚本和样式表，然后创建百度地图实例并进行初始化。

添加自定义 canvas 叠加物

function getTextureCanvas() {
  // ...
  return textureCanvas
}

var canvasSource = getTextureCanvas()
var pStart = new BMapGL.Point(116.447717, 39.919173)
var pEnd = new BMapGL.Point(116.453125, 39.923475)
var bounds = new BMapGL.Bounds(
  new BMapGL.Point(pStart.lng, pEnd.lat),
  new BMapGL.Point(pEnd.lng, pStart.lat),
)
var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
  type: 'canvas',
  url: canvasSource,
  opacity: 0.9,
})
map.addOverlay(canvasOverlay)

此代码段通过创建自定义 canvas 元素并将其作为叠加物添加到地图上，实现了自定义图形的绘制。

添加文本标注

var opts = {
  position: new BMapGL.Point(116.4503, 39.9213),
  offset: new BMapGL.Size(-28, -20),
}
var label = new BMapGL.Label('日坛公园', opts)
label.setStyle({
  // ...
})
map.addOverlay(label)

此代码段使用百度地图提供的 Label 类添加了一个文本标注到地图上，并对其样式进行了自定义。

实现地图点击事件监听

map.addEventListener('click', function (e) {
  alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat)
})

此代码段为地图添加了一个点击事件监听器，当用户点击地图时，会弹出提示框显示点击位置的经纬度坐标。

提供异步加载脚本和样式表的方法

async loadScripts(sources) {
  await Promise.all(sources.map((src) => this.loadScript(src)))
}

async loadStyles(hrefs) {
  await Promise.all(hrefs.map((href) => this.loadStyle(href)))
}

loadScript(src) {
  // ...
}

loadStyle(src) {
  // ...
}

这些方法提供了异步加载脚本和样式表的通用方法，简化了代码的结构和维护。

总结与展望

通过编写这段代码，我加深了对百度地图 Web API 的理解，掌握了如何利用 API 实现自定义地图功能。在未来，该代码可以进一步拓展和优化，例如：

集成更多的第三方库以实现更丰富的功能，如绘制线、面等图形。
根据实际需求定制地图样式，如更改地图底图、控制标注的显示。
添加交互功能，如缩放、平移、旋转地图，并实现与其他地图组件的联动。

ECHO recommendation

ScriptEcho.ai