首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【VUE调用百度地图】

【VUE调用百度地图】

作者头像
用户1750537
发布2025-08-29 19:13:51
发布2025-08-29 19:13:51
5900
代码可运行
举报
运行总次数:0
代码可运行

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档