本代码示例展示了如何在 Vue 3 应用中集成百度地图 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 室内图和地铁图的集成方法。未来,可以考虑对该功能进行以下拓展和优化: