本代码旨在为 Vue.js 项目集成百度地图 API,实现地图显示、搜索、定位等功能,适用于需要在地图上展示地理信息或提供导航功能的应用场景。
本代码主要实现了以下功能:
为了避免阻塞页面渲染,我们采用异步方式加载外部脚本和样式文件。
async loadScripts(sources) {
await Promise.all(sources.map((src) => this.loadScript(src)))
}
async loadStyles(hrefs) {
await Promise.all(hrefs.map((href) => this.loadStyle(href)))
}
const map = new BMapGL.Map('l-map') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map, panel: 'r-result' },
pageCapacity: 5,
})
local.searchInBounds(myKeys, map.getBounds())
renderOptions
指定搜索结果的展示方式,map
为地图实例,panel
为展示结果的容器 ID。pageCapacity
指定每页显示的结果数量。searchInBounds
在指定范围内搜索指定关键词的地点。