百度地图定位查询功能实现

应用场景

本代码用于实现基于百度地图的定位查询功能，用户可以通过输入经纬度信息，在地图上准确定位到指定位置，并添加标记。

基本功能

• 初始化百度地图，设置中心点和缩放级别。
• 根据用户输入的经纬度，在地图上添加标记，并平移地图到标记位置。

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

1. 加载百度地图 API 和样式

async mounted() {
  await Promise.all([
    this.loadScripts([
      // 加载百度地图 API 和插件
    ]),
    this.loadStyles([
      // 加载百度地图样式
    ]),
  ])
}

2. 初始化百度地图

const BMapGL = window.BMapGL
var map = new BMapGL.Map('allmap')
map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 11)
map.enableScrollWheelZoom(true)

3. 查询定位

function theLocation() {
  if (
    document.getElementById('lng').value != '' &&
    document.getElementById('lat').value != ''
  ) {
    map.clearOverlays()
    var new_point = new BMapGL.Point(
      document.getElementById('lng').value,
      document.getElementById('lat').value,
    )
    var marker = new BMapGL.Marker(new_point) // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中
    map.panTo(new_point)
  }
}

关键代码分析：

• document.getElementById('lng').value 和 document.getElementById('lat').value 分别获取用户输入的经度和纬度。
• var new_point = new BMapGL.Point(经度, 纬度) 创建一个新的经纬度点。
• var marker = new BMapGL.Marker(new_point) 创建一个新的标记。
• map.addOverlay(marker) 将标记添加到地图中。
• map.panTo(new_point) 将地图平移到标记位置。

总结与展望

开发过程中的经验与收获：

• 掌握了百度地图 API 的基本使用方法，包括地图初始化、标记创建、定位查询等。
• 了解了如何使用 Promise.all() 同时加载多个脚本和样式。

未来功能拓展与优化：

• 优化定位查询功能，支持模糊查询和自动补全。
• 添加更多地图功能，如测距、标绘等。
• 整合其他数据源，在地图上展示更多信息。