本代码旨在提供一种便捷的方法,将一批文本地址批量解析为经纬度坐标,并在地图上标注出来。该功能适用于需要处理大量地址数据的场景,例如物流配送、地图导航、城市规划等。
该代码主要实现了以下功能:
1. 加载百度地图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',
'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',
]),
this.loadStyles([
'http://api.map.baidu.com/res/webgl/10/bmap.css',
'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
]),
])
此代码块加载了百度地图API及其依赖的JavaScript库和CSS样式文件。
2. 从文本框中读取地址列表
var adds = [
'包河区金寨路1号(金寨路与望江西路交叉口)',
'庐阳区凤台路209号(凤台路与蒙城北路交叉口)',
'蜀山区金寨路217号(近安医附院公交车站)',
'蜀山区梅山路10号(近安徽饭店) ',
'蜀山区 长丰南路159号铜锣湾广场312室',
'合肥市寿春路93号钱柜星乐町KTV(逍遥津公园对面)',
'庐阳区长江中路177号',
'新站区胜利路89',
]
此代码块定义了一个包含地址列表的数组。
3. 使用百度地图API的地理编码服务将地址解析为经纬度坐标
function geocodeSearch(add) {
myGeo.getPoint(
add,
function (point) {
if (point) {
var address = new BMapGL.Point(point.lng, point.lat)
addMarker(
address,
new BMapGL.Label(index + ':' + add, {
offset: new BMapGL.Size(10, -10),
}),
)
}
},
'合肥市',
)
}
此代码块使用百度地图API的地理编码服务将单个地址解析为经纬度坐标。它使用myGeo.getPoint()
方法将地址转换为经纬度点。
4. 在地图上添加标注,显示解析后的位置
function addMarker(point, label) {
var marker = new BMapGL.Marker(point)
map.addOverlay(marker)
marker.setLabel(label)
}
此代码块在指定经纬度坐标处创建标注并将其添加到地图中。
5. 批量解析地址
var index = 0
function bdGEO() {
if (index < adds.length) {
var add = adds[index]
geocodeSearch(add)
index++
}
}
此代码块实现了批量解析地址的功能。它循环遍历地址列表,依次解析每个地址并添加标注。
经验与收获
开发此代码的过程中,我深入了解了百度地图API的使用,包括地理编码服务、地图操作和标注创建。我还提高了对异步编程和事件处理的理解。
未来拓展与优化
未来可以对该功能进行以下拓展和优化: