AI智慧社区--百度地图

在这里插入图片描述

数据库：

在这里插入图片描述

前端实现

页面代码

<template>
  <div class="app-container">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
      <!-- 定位 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
      <!-- 城市列表 -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
      <!-- 缩放工具 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 视图切换 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <!-- 标注 -->
      <bm-marker
        v-for="(item, index) in mapData"
        :key="index"
        :position="{lng: item.lng, lat: item.lat}"
        :clicking="false"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <!-- 显示小区名称 -->
        <bm-label :content="item.communityName" :label-style="{color: 'red', fontSize : '9px'}" :offset="{width: -25, height: 20}" />
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import { getCommunityMap } from '@/api/sys/community'
export default {
  name: 'Map',
  data() {
    return {
      listQuery: {
        gradeId: ''
      },
      center: {
        lng: 116.3755,
        lat: 39.80896
      },
      zoom: 12,
      mapData: []
    }
  },
  mounted() {
  },
  methods: {
    initMap({ BMap, map }) {
      this.center.lng = 116.4146
      this.center.lat = 40.11316
      map.enableScrollWheelZoom()
      map.enableKeyboard()
      map.enableDoubleClickZoom()
      getCommunityMap().then(res => {
        this.mapData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bm-view {
    width: 100%;
    height: 620px;
  }
</style>

调用的后端接口

export function getCommunityMap(data) {
  return request({
    url: '/sys/community/getCommunityMap',
    method: 'get'
  })
}

后端实现：

实体类：

package com.southwind.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.time.LocalDateTime;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import java.io.Serializable;
import java.util.Date;

import lombok.Data;
import lombok.EqualsAndHashCode;

/**
 * <p>
 *
 * </p>
 *
 * @author admin
 * @since 2023-07-26
 */
@Data
  @EqualsAndHashCode(callSuper = false)
    public class Community implements Serializable {

    private static final long serialVersionUID=1L;

      @TableId(value = "community_id", type = IdType.AUTO)
      private Integer communityId;

      /**
     * 小区名称
     */
      private String communityName;

      /**
     * 楼栋数量
     */
      private Integer termCount;

      /**
     * 序号
     */
      private Integer seq;

      /**
     * 创建人
     */
      private String creater;

      /**
     * 创建时间
     */
        @TableField(fill = FieldFill.INSERT)
      private Date createTime;

      /**
     * 经度
     */
      private Float lng;

      /**
     * 维度
     */
      private Float lat;


}

 @GetMapping("/getCommunityMap")
    public Result getCommunityMap(){
        List<Community> list = this.communityService.list();
        if(list == null) return Result.error("没有小区数据");
        return Result.ok().put("data", list);
    }

如果有更深层次的需要，请访问官网
官网的地址：https://lbsyun.baidu.com/products/map

展示百度地图并在其上标注小区位置的流程：

前端部分

1. 组件加载与数据初始化

当包含百度地图的 Vue 组件被加载时，会首先执行 data 函数进行数据初始化：

listQuery：一个对象，初始时 gradeId 为空，可能后续用于筛选查询相关数据，但在当前流程未使用。
center：定义地图的初始中心点坐标，经度为 116.3755，纬度为 39.80896。
zoom：设置地图的初始缩放级别为 12。
mapData：一个空数组，用于存储从后端获取的小区数据。

2. 模板渲染

模板部分使用 baidu-map 组件创建地图容器，并设置其属性：

:center：绑定 center 数据，确定地图初始显示的中心点。
:zoom：绑定 zoom 数据，设置地图的缩放级别。
@ready：监听地图加载完成事件，当地图准备好后会触发 initMap 方法。

同时，在地图上添加了多个控件：

bm-geolocation：定位控件，位于地图右下角，可显示地址栏并自动定位。
bm-city-list：城市列表控件，位于地图左上角。
bm-navigation：缩放工具控件，位于地图右上角。
bm-map-type：视图切换控件，位于地图左上角，可在普通地图和混合地图之间切换。

3. 地图初始化与数据请求

当地图加载完成触发 initMap 方法时，会执行以下操作：

更新地图中心点坐标为 lng: 116.4146，lat: 40.11316。
启用地图的交互功能，包括鼠标滚轮缩放、键盘操作和双击缩放。
调用 getCommunityMap 函数向后端发送 GET 请求，请求 /sys/community/getCommunityMap 接口。
当请求成功返回后，将响应数据中的 data 赋值给 mapData。

4. 小区标注显示

mapData 被赋值后，v-for 指令会遍历其中的每个小区数据项：

为每个小区创建一个 bm-marker 标注，标注的位置由小区的经纬度 item.lng 和 item.lat 确定。
标注设置了跳动动画 BMAP_ANIMATION_BOUNCE，且 clicking 属性为 false。
每个标注上添加一个 bm-label 标签，显示小区的名称 item.communityName，并设置标签的样式，如文字颜色为红色，字体大小为 9px，以及偏移量。

后端部分

1. 接口调用

前端调用 getCommunityMap 函数发送 GET 请求到 /sys/community/getCommunityMap 接口。

2. 数据查询

后端的 getCommunityMap 方法被触发，调用 communityService 的 list 方法从数据库中查询所有的小区数据，存储在 List<Community> 列表中。

3. 结果返回

如果查询结果 list 为空，返回一个包含错误信息 "没有小区数据" 的 Result 对象。
如果查询结果不为空，将查询到的小区数据列表封装在 Result 对象中，以 data 字段返回给前端。