vue中实现地图与数据表格交互的六种场景（附具体代码示例）

痛定思痛。 2023-10-10 19:23 7阅读 0赞

#### vue中实现地图与数据表格交互的六种场景 ####

*   *   *  1、Vue 组件中显示地图，并实现点击地图获取坐标
         *  2、Vue结合百度地图 API ，并实现点击表格的每项记录在地图上显示对应的位置
         *  3、Vue结合百度地图 API 实现一个简单的地点搜索应用
         *  4、将数据表格中的特定列与地图上的要素进行关联，实现在表格中选择设备时地图位置的更新
         *  5、数据表格中进行筛选和过滤操作，并将筛选后的数据在地图上以可视化的方式呈现
         *  6、数据表格中的数值数据在地图上进行聚合和统计，并以热力图和统计图表的形式呈现

#### 1、Vue 组件中显示地图，并实现点击地图获取坐标 ####

当结合百度地图 API 和 Vue 框架创建实际应用时，以下是一个简单的案例，展示了如何在 Vue 组件中显示地图，并实现点击地图获取坐标的功能：

<template>
      <div id="mapContainer">
        
        <div ref="map" class="map"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
        };
      },
      mounted() {
        
        this.initMap();
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
    
          // 绑定地图点击事件
          this.map.addEventListener('click', this.handleMapClick);
        },
        handleMapClick(e) {
        
          const {
         lng, lat } = e.point;
          console.log('Clicked coordinate:', lng, lat);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    </style>

在上述示例中，首先在 部分定义了一个地图容器的 div，并使用 ref 属性将其与 Vue 组件中的 map 属性进行关联。

在 script部分，通过 mounted 生命周期钩子调用 initMap 方法，在该方法中创建了百度地图实例并设置了地图的中心点和缩放级别。

同时，通过 addEventListener 方法绑定了地图的点击事件，并在 handleMapClick 方法中获取点击事件的坐标信息，并进行处理。在这个例子中，我们简单地将坐标打印到控制台。

在 style>部分，使用 CSS 样式定义了地图容器的大小。

请注意，上述示例中需要在项目中引入百度地图 API 的 JavaScript 文件，具体引入方式可以参考百度地图 API 的文档。

这个案例展示了如何在 Vue 组件中使用百度地图 API，并实现了点击地图获取坐标的功能。您可以根据实际需求进行扩展和修改，添加其他地图操作或使用其他百度地图 API 的功能。

#### 2、Vue结合百度地图 API ，并实现点击表格的每项记录在地图上显示对应的位置 ####

代码展示了如何在表格的每项记录上实现点击交互，并在地图上显示对应的位置

<template>
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>经度</th>
              <th>纬度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in data" :key="item.id" @click="handleTableRowClick(item)">
              <td>{
        {
         item.id }}</td>
              <td>{
        {
         item.name }}</td>
              <td>{
        {
         item.longitude }}</td>
              <td>{
        {
         item.latitude }}</td>
            </tr>
          </tbody>
        </table>
        <div ref="map" class="map"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
          data: [
            {
         id: 1, name: 'Location A', longitude: 116.404, latitude: 39.915 },
            {
         id: 2, name: 'Location B', longitude: 116.418, latitude: 39.921 },
            {
         id: 3, name: 'Location C', longitude: 116.386, latitude: 39.912 },
          ],
        };
      },
      mounted() {
        
        this.initMap();
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
        },
        handleTableRowClick(item) {
        
          const {
         longitude, latitude } = item;
          const point = new BMap.Point(longitude, latitude);
    
          // 在地图上标记选中的位置
          const marker = new BMap.Marker(point);
          this.map.clearOverlays();
          this.map.addOverlay(marker);
          this.map.panTo(point);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    </style>

在上述示例中，除了地图部分的代码保持不变外，我们添加了一个表格来展示位置的相关信息。每一行的记录都使用 v-for 指令来遍历 data 数组，并使用 @click 事件监听器绑定了 handleTableRowClick 方法，实现了表格每项记录的点击交互。

在 handleTableRowClick 方法中，我们获取了选中记录的经度和纬度信息，并创建了一个 BMap.Point 对象来表示该位置。然后，我们在地图上清除之前的标记，并使用 BMap.Marker 在选中的位置上标记一个新的标记。最后，通过调用 map.panTo 方法将地图中心移动到选中的位置。

这个示例展示了如何在表格的每项记录上实现点击交互，并在地图上显示对应位置的标记。您可以根据实际需求扩展和修改代码，以满足您的需求。例如，您可以添加更多的字段和数据到表格中，或者在点击记录时执行其他操作，如显示详细信息窗口或进行进一步的数据处理。

同时，您也可以根据百度地图 API 的文档，使用丰富的地图功能来增强用户体验。例如，添加缩放控件、导航控件或自定义图层等。

另外，为了更好地管理和组织代码，您还可以将地图和表格分别封装为单独的 Vue 组件，以便在其他页面或组件中重用它们。

总之，以上示例提供了一个基本的框架，帮助您实现地图与表格的交互功能。您可以根据自己的具体业务需求，进一步扩展和优化这个示例，以构建出适合您应用的功能丰富的地图应用程序。

#### 3、Vue结合百度地图 API 实现一个简单的地点搜索应用 ####

<template>
      <div>
        <input type="text" v-model="keyword" placeholder="请输入关键词" />
        <button @click="search">搜索</button>
        <ul>
          <li v-for="poi in pois" :key="poi.uid" @click="selectPlace(poi)">
            {
        {
         poi.name }}
          </li>
        </ul>
        <div ref="map" class="map"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
          keyword: '',
          pois: [],
        };
      },
      mounted() {
        
        this.initMap();
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
        },
        search() {
        
          // 清空之前的搜索结果
          this.pois = [];
    
          // 创建地点搜索实例
          const localSearch = new BMap.LocalSearch(this.map, {
        
            onSearchComplete: results => {
        
              if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
        
                // 获取搜索结果
                for (let i = 0; i < results.getCurrentNumPois(); i++) {
        
                  this.pois.push(results.getPoi(i));
                }
              }
            },
          });
    
          // 发起地点搜索
          localSearch.search(this.keyword);
        },
        selectPlace(poi) {
        
          const {
         point, title } = poi;
    
          // 在地图上显示选中的地点
          this.map.clearOverlays();
          const marker = new BMap.Marker(point);
          this.map.addOverlay(marker);
          this.map.panTo(point);
    
          // 执行其他操作，如显示详细信息窗口等
          console.log('Selected place:', title);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    </style>

在上述案例中，我们通过在 部分定义了一个输入框和一个按钮，用于输入关键词并触发搜索功能。同时，使用 v-for 指令遍历 pois 数组，将搜索结果以列表形式展示出来。

在 script>部分，我们定义了 keyword 和 pois 两个响应式数据，用于绑定输入框的值和存储搜索结果。在 mounted 生命周期钩子中调用 initMap 方法，创建百度地图实例并设置初始位置。

在 search 方法中，首先清空之前的搜索结果，然后创建 BMap.LocalSearch 实例，并指定 onSearchComplete 回调函数处理搜索结果。通过调用 localSearch.search 方法发起地点搜索，传入用户输入的关键词。

在 selectPlace 方法中，获取选中的地点信息，并在地图上显示选中地点的标记。同时，您可以在此处执行其他操作，比如显示详细信息窗口、执行进一步的数据处理或导航等。在这个案例中，我们简单地将选中地点的标题打印到控制台。

在 style部分，使用 CSS 样式定义了地图容器的大小。

这个案例展示了如何在 Vue 组件中结合百度地图 API 实现地点搜索功能。用户可以输入关键词，触发搜索，然后在搜索结果中选择一个地点，该地点将在地图上显示标记，并执行其他操作。

请注意，在使用百度地图 API 之前，您需要先在项目中引入百度地图 API 的 JavaScript 文件，并获取相应的 API 密钥。具体引入方式和使用方法可以参考百度地图 API 的官方文档。

您可以根据自己的需求和业务逻辑，进一步扩展和修改这个案例，添加更多功能和交互。例如，添加搜索结果的分页功能、显示更多详细信息、实现地点导航等。

#### 4、将数据表格中的特定列与地图上的要素进行关联，实现在表格中选择设备时地图位置的更新 ####

下面是一个具体的案例，展示了如何将数据表格中的特定列与地图上的要素进行关联，实现在表格中选择设备时地图位置的更新：

<template>
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>设备名称</th>
              <th>经度</th>
              <th>纬度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="device in devices" :key="device.id" @click="selectDevice(device)">
              <td>{
        {
         device.id }}</td>
              <td>{
        {
         device.name }}</td>
              <td>{
        {
         device.longitude }}</td>
              <td>{
        {
         device.latitude }}</td>
            </tr>
          </tbody>
        </table>
        <div ref="map" class="map"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
          devices: [
            {
         id: 1, name: '设备A', longitude: 116.404, latitude: 39.915 },
            {
         id: 2, name: '设备B', longitude: 116.418, latitude: 39.921 },
            {
         id: 3, name: '设备C', longitude: 116.386, latitude: 39.912 },
          ],
          selectedDevice: null,
        };
      },
      mounted() {
        
        this.initMap();
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
        },
        selectDevice(device) {
        
          // 更新选中设备
          this.selectedDevice = device;
    
          // 在地图上标记选中设备的位置
          const {
         longitude, latitude } = device;
          const point = new BMap.Point(longitude, latitude);
    
          this.map.clearOverlays();
          const marker = new BMap.Marker(point);
          this.map.addOverlay(marker);
          this.map.panTo(point);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    </style>

在上述案例中，我们使用了一个数据表格来展示设备的信息，每一行代表一个设备。通过 v-for 指令遍历 devices 数组，在表格中显示设备的ID、名称、经度和纬度等属性。通过点击表格的行，调用 selectDevice 方法来选择设备。

在 script 部分，我们定义了 devices 数组来存储设备数据，以及 selectedDevice 来追踪当前选中的设备。在 selectDevice 方法中，更新 selectedDevice 的值，并在地图上标记选中设备的位置。我们使用百度地图 API 的 BMap.Map、BMap.Point 和 BMap.Marker 来创建地图实例、位置点和标记，并使用 map.clearOverlays() 方法清除之前的标记，然后使用 map.addOverlay() 方法添加选中设备的标记，最后使用 map.panTo() 方法将地图中心点移动到选中设备的位置。

在 style 部分，我们定义了地图容器的样式。

这个案例展示了如何将数据表格中的设备信息与地图上的要素进行关联。当用户在表格中选择不同的设备时，地图会相应地更新显示选定设备的位置和状态。

您可以根据自己的需求和业务逻辑，进一步扩展和修改这个案例。例如，可以在地图上显示设备的状态图标、添加设备详细信息的弹窗窗口、实现设备位置的实时更新等。

请注意，在使用百度地图 API 之前，需要先在项目中引入百度地图 API 的 JavaScript 文件，并获取相应的 API 密钥。具体引入方式和使用方法可以参考百度地图 API 的官方文档。

#### 5、数据表格中进行筛选和过滤操作，并将筛选后的数据在地图上以可视化的方式呈现 ####

下面是一个案例，展示了如何在数据表格中进行筛选和过滤操作，并将筛选后的数据在地图上以可视化的方式呈现：

<template>
      <div>
        <div>
          <label for="filter">筛选条件：</label>
          <select id="filter" v-model="selectedCondition">
            <option value="">全部</option>
            <option value="typeA">类型A</option>
            <option value="typeB">类型B</option>
            <option value="typeC">类型C</option>
          </select>
          <button @click="filterData">筛选</button>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>类型</th>
              <th>经度</th>
              <th>纬度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in filteredData" :key="item.id" @click="selectItem(item)">
              <td>{
        {
         item.id }}</td>
              <td>{
        {
         item.name }}</td>
              <td>{
        {
         item.type }}</td>
              <td>{
        {
         item.longitude }}</td>
              <td>{
        {
         item.latitude }}</td>
            </tr>
          </tbody>
        </table>
        <div ref="map" class="map"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
          data: [
            {
         id: 1, name: '位置A', type: 'typeA', longitude: 116.404, latitude: 39.915 },
            {
         id: 2, name: '位置B', type: 'typeB', longitude: 116.418, latitude: 39.921 },
            {
         id: 3, name: '位置C', type: 'typeA', longitude: 116.386, latitude: 39.912 },
            {
         id: 4, name: '位置D', type: 'typeC', longitude: 116.395, latitude: 39.907 },
          ],
          filteredData: [],
          selectedCondition: '',
        };
      },
      mounted() {
        
        this.initMap();
        this.filteredData = this.data;
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
        },
        filterData() {
        
          if (this.selectedCondition === '') {
        
            this.filteredData = this.data;
          } else {
        
            this.filteredData = this.data.filter(item => item.type === this.selectedCondition);
          }
        },
        selectItem(item) {
        
          const {
         longitude, latitude } = item;
          const point = new BMap.Point(longitude, latitude);
    
          this.map.clearOverlays();
          const marker = new BMap.Marker(point);
          this.map.addOverlay(marker);
          this.map.panTo(point);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    </style>

在上述案例中，我们添加了一个筛选条件的下拉选择框和一个筛选按钮，用户可以根据类型（type）来筛选数据。在 data 数组中，我们存储了一些地理位置的数据，包括ID、名称、类型、经度和纬度等属性。

在 script 部分，我们定义了 selectedCondition 来追踪用户选择的筛选条件，filteredData 来存储筛选后的数据。在 mounted 钩子函数中，初始化地图并将 filteredData 初始设置为全部数据。

在 filterData 方法中，根据用户选择的筛选条件，使用 Array.filter 方法对数据进行筛选。如果筛选条件为空，则显示全部数据；否则，只显示与筛选条件匹配的数据。

在 selectItem 方法中，根据用户选择的数据，在地图上显示对应地点的标记。我们使用百度地图 API 的 BMap.Map、BMap.Point 和 BMap.Marker 来创建地图实例、位置点和标记，并使用 map.clearOverlays() 方法清除之前的标记，然后使用 map.addOverlay() 方法添加选中设备的标记，并使用 map.panTo() 方法将地图中心点移动到选中设备的位置。

在 style 部分，我们定义了地图容器的样式。

这个案例展示了如何在数据表格中进行筛选和过滤操作，并将筛选后的数据在地图上以可视化的方式呈现。用户可以根据特定的条件选择感兴趣的数据，然后在地图上显示相关的地理位置。

#### 6、数据表格中的数值数据在地图上进行聚合和统计，并以热力图和统计图表的形式呈现 ####

下面是一个案例，展示了如何将数据表格中的数值数据在地图上进行聚合和统计，并以热力图和统计图表的形式呈现：

<template>
      <div>
        <div>
          <label for="heatmap">显示热力图：</label>
          <input type="checkbox" id="heatmap" v-model="showHeatmap" @change="toggleHeatmap">
        </div>
        <div ref="map" class="map"></div>
        <div ref="chart" class="chart"></div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          map: null,
          data: [
            {
         id: 1, name: '位置A', value: 10, longitude: 116.404, latitude: 39.915 },
            {
         id: 2, name: '位置B', value: 20, longitude: 116.418, latitude: 39.921 },
            {
         id: 3, name: '位置C', value: 30, longitude: 116.386, latitude: 39.912 },
            {
         id: 4, name: '位置D', value: 40, longitude: 116.395, latitude: 39.907 },
          ],
          heatmapOverlay: null,
          showHeatmap: false,
          chartData: [],
        };
      },
      mounted() {
        
        this.initMap();
        this.initChartData();
        this.drawChart();
      },
      methods: {
        
        initMap() {
        
          // 创建地图实例
          this.map = new BMap.Map(this.$refs.map);
    
          // 设置地图中心点和缩放级别
          const point = new BMap.Point(116.404, 39.915);
          this.map.centerAndZoom(point, 15);
        },
        initChartData() {
        
          this.chartData = this.data.map(item => ({
        
            name: item.name,
            value: item.value,
          }));
        },
        drawChart() {
        
          // 使用图表库绘制统计图表，这里以echarts为例
          const chart = echarts.init(this.$refs.chart);
    
          const option = {
        
            title: {
        
              text: '数据统计',
            },
            xAxis: {
        
              type: 'category',
              data: this.chartData.map(item => item.name),
            },
            yAxis: {
        
              type: 'value',
            },
            series: [
              {
        
                name: '数据',
                type: 'bar',
                data: this.chartData.map(item => item.value),
              },
            ],
          };
    
          chart.setOption(option);
        },
        toggleHeatmap() {
        
          if (this.showHeatmap) {
        
            this.showHeatmapOverlay();
          } else {
        
            this.hideHeatmapOverlay();
          }
        },
        showHeatmapOverlay() {
        
          const points = this.data.map(item => new BMap.Point(item.longitude, item.latitude));
          this.heatmapOverlay = new BMapLib.HeatmapOverlay();
          this.map.addOverlay(this.heatmapOverlay);
          this.heatmapOverlay.setDataSet({
         data: points, max: 100 });
          this.heatmapOverlay.show();
        },
        hideHeatmapOverlay() {
        
          if (this.heatmapOverlay) {
        
            this.map.removeOverlay(this.heatmapOverlay);
            this.heatmapOverlay = null;
          }
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
        
      width: 100%;
      height: 400px;
    }
    
    .chart {
        
      width: 100%;
    	height: 300px;
    }
    </style>

在上述案例中，我们使用了一个简单的数据集，包含位置的名称、数值数据、经度和纬度等属性。

在 `<template>` 部分，我们添加了一个复选框来控制是否显示热力图，以及一个地图容器和一个统计图表容器。

在 `<script>` 部分，我们定义了 `showHeatmap` 来追踪用户是否选择显示热力图，`heatmapOverlay` 来存储热力图的覆盖物，`chartData` 来存储用于统计图表的数据。

在 `mounted` 钩子函数中，初始化地图和统计图表，并调用 `initChartData` 方法将数据转换为适用于统计图表的格式，并调用 `drawChart` 方法绘制统计图表。

在 `toggleHeatmap` 方法中，根据用户选择的是否显示热力图，调用相应的方法来显示或隐藏热力图。

在 `showHeatmapOverlay` 方法中，使用百度地图 API 的 `BMapLib.HeatmapOverlay` 来创建热力图的覆盖物，并将其添加到地图上。我们将位置的经纬度数据作为热力图的数据集，并设置热力图的最大值为100。

在 `hideHeatmapOverlay` 方法中，将热力图的覆盖物从地图上移除。

在 `<style>` 部分，我们定义了地图容器和统计图表容器的样式。

这个案例展示了如何将数据表格中的数值数据在地图上进行聚合和统计，并以热力图和统计图表的形式呈现。用户可以通过复选框选择是否显示热力图，以直观地观察数据的分布、密度和趋势，从而进行空间分析和决策。