让数据可视化：Vue2 项目中轻松封装百度地图

2023-10-07 15:22:09

前言

在Vue2项目中，常常需要用到地图来进行数据的可视化展示。百度地图作为国内主流的地图服务商，提供了丰富的API，能够满足大部分开发需求。

在项目中，为了复用地图的功能，我们可以将百度地图的加载、地图打点、自定义信息弹窗等功能进行封装，以便在其他页面中直接使用。这样不仅可以提高开发效率，还可以保证代码的整洁性和可维护性。

封装百度地图

1. 安装依赖

首先，我们需要在项目中安装百度地图的JavaScript API。可以使用npm命令：

npm install --save baidu-map

安装完成后，在项目中引入百度地图的API：

import BMap from 'baidu-map'

2. 封装地图加载

我们将地图的加载过程封装成一个函数，方便在其他页面中直接调用。代码如下：

const loadMap = (containerId, center, zoom) => {
  return new Promise((resolve, reject) => {
    const map = new BMap.Map(containerId);
    map.centerAndZoom(center, zoom);
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    map.enableContinuousZoom();
    map.addEventListener('tilesloaded', () => {
      resolve(map)
    })
  })
}

其中，containerId是地图容器的ID，center是地图的中心点坐标，zoom是地图的缩放级别。

3. 封装地图打点

接下来，我们将地图打点的功能也封装成一个函数：

const addMarker = (map, point, content) => {
  const marker = new BMap.Marker(point)
  marker.addEventListener('click', () => {
    const infoWindow = new BMap.InfoWindow(content)
    map.openInfoWindow(infoWindow, point)
  })
  map.addOverlay(marker)
}

其中，map是百度地图实例，point是标记点的坐标，content是标记点的自定义信息内容。

4. 封装自定义信息弹窗

最后，我们将自定义信息弹窗的功能也封装成一个函数：

const createInfoWindow = (content) => {
  return new BMap.InfoWindow(content)
}

其中，content是信息弹窗的内容。

使用封装后的百度地图

在其他页面中，我们可以直接调用封装后的百度地图功能。例如，在某个页面中，我们需要在地图上显示一个标记点，并在地图上显示一个信息弹窗。我们可以这样写：

import { loadMap, addMarker, createInfoWindow } from '@/utils/baidu-map'

export default {
  data() {
    return {
      map: null,
      center: {
        lng: 121.472644,
        lat: 31.230393
      },
      zoom: 12
    }
  },
  mounted() {
    loadMap('map', this.center, this.zoom).then((map) => {
      this.map = map

      const point = new BMap.Point(121.472644, 31.230393)
      const content = '上海市浦东新区张江高科'
      const infoWindow = createInfoWindow(content)
      addMarker(this.map, point, infoWindow)
    })
  }
}