【VUE调用百度地图】

用户1750537

发布于 2025-08-29 19:13:51

11000

代码可运行

运行总次数：0

代码可运行

当在前端使用VUE展示百度地图并标点，并通过范围进行筛选时，步骤编写代码：

在项目中引入了VUE和百度地图的JavaScript API。
创建一个Vue组件，用于展示地图和筛选功能。
在组件中引入百度地图相关的代码，实现地图展示和标点功能。
添加一个范围选择功能，可以通过设置地图视野来筛选标点。

下面是一个简单的示例代码，演示了如何在VUE中展示百度地图并实现标点和范围筛选功能：

<template>
  <div>
    <div ref="map" style="width: 100%; height: 400px;"></div>
    <button @click="filterMarkers">筛选标点</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      markers: [
        { lng: 116.4035, lat: 39.915 },
        { lng: 116.4077, lat: 39.914 },
        // 添加更多标点坐标
      ]
    };
  },
  mounted() {
    this.initMap();
    this.addMarkers();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map(this.$refs.map);
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
    },
    addMarkers() {
      this.markers.forEach(marker => {
        const point = new BMap.Point(marker.lng, marker.lat);
        const marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
      });
    },
    filterMarkers() {
      const bounds = this.map.getBounds();
      this.markers.forEach(marker => {
        const point = new BMap.Point(marker.lng, marker.lat);
        if (bounds.containsPoint(point)) {
          // 在范围内的标点处理逻辑
          console.log('此标点在范围内：', marker);
        }
      });
    }
  }
};
</script>

<style>
/* 可根据需要添加样式 */
</style>

在这个示例中，一个Vue组件，在mounted生命周期钩子函数中初始化地图，并添加了一些标点。然后，实现了一个filterMarkers方法，在这个方法中可以获取地图当前视野的范围，并根据范围筛选出符合条件的标点。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除

前端