高德地图实现画圈搜索（画圈找房等）

效果图：

        

实现思路：

         一，在项目中引入高德地图组件，申请Key,初始化地图；

        二，在地图上渲染标记点，动态渲染一个个标记点；

        三，实现画线功能，比较麻烦，转换思维，我们可以将用户鼠标划过的位置坐标存到一个数组中，然后通过AMap.Polyline 将数组中的坐标连成线，最后AMap.Polygon 将圈内的东西进行填充；

        四，最终我们通过高德地图中的数学计算库，获取圈内的数据;

实现 

 data数据

一、在项目中引入高德地图组件，申请Key,初始化地图；

         vue项目：JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API

        React项目：JS API 结合 React 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API  

二、这时候我们绑定画圈事件；

 // 开始画圈
    drawClick() {
      this.map.setStatus({
        doubleClickZoom: false, //是否开启双击缩放地图
        scrollWheel: false, //是否开启鼠标滚轮缩放地图
        dragEnable: false, //是否开启拖拽地图
        keyboardEnable: false //是否开启键盘操作地图
      })
      this.map.setDefaultCursor('pointer') //通过 setDefaultCursor 方法设置地图的默认鼠标指针样式
      this.drawing = true
    },
    // 取消画圈
    noDrawClick() {
      this.map.setStatus({
        doubleClickZoom: true,
        scrollWheel: true,
        dragEnable: true,
        keyboardEnable: true
      })
      this.map.setDefaultCursor('default')
      this.drawing = false
      this.selectedArr = []
      this.map.remove(this.lastPolyLine)
      this.map.remove(this.polygonAfterDraw)
    },

 三，在地图上渲染标记点，动态渲染一个个标记点；

  data() {
    return {
      dataList: [
        [116.402394,39.937182, '北京南锣鼓巷'],
        [116.459844,39.872011, '北京古玩市场'],
        [116.410829,39.881913, '北京天坛'],
        [116.397029,39.917839, '故宫'],
        [116.385281,39.941862, '什刹海']
      ]
}}
    // 初始化点
    initMapMarkers(AMap) {
      this.dataList.forEach((item) => {
        this.map.add(
          new AMap.Marker({
            position: [item[0], item[1]]
          })
        );
      });
    },

在这里进行调用否则获取不到实例；

四、实现画线功能；

// 初始化鼠标画圈事件
    initMapMouseHandle(AMap) {
      // 鼠标移动事件处理程序
      this.map.on('mousemove', (e) => {
        if (this.isMouseDown) {
          // 讲坐标添加到lastPolyLine数组中
          const point = [e.lnglat.lng, e.lnglat.lat]
          this.polyPointArray.push(point)
          // 如果已存在上一条折线，则移除
          if (this.lastPolyLine) {
            this.map.remove(this.lastPolyLine)
          }
          // 使用路径规划实现一个圆圈
          const polyline = new AMap.Polyline({
            path: this.polyPointArray,
            strokeColor: '#4794f5',
            strokeOpacity: 2
          })
          this.map.add(polyline)
          this.lastPolyLine = polyline
        }
      })
      // 鼠标按下事件处理程序
      this.map.on('mousedown', () => {
        // 移除上一条折线并初始化变量
        if (this.drawing) {
          this.lastPolyLine && this.map.remove(this.lastPolyLine)
          this.lastPolyLine = null
          this.polyPointArray = []
          this.isMouseDown = true
        }
      })
      // 鼠标松开事件处理程序
      document.addEventListener('mouseup', () => {
        if (this.drawing && this.isMouseDown) {
          // 退出画线状态，将 isMouseDown 设置为 false
          this.isMouseDown = false
          // 添加多边形覆盖物,设置为禁止点击
          this.polygonAfterDraw = new AMap.Polygon({
            path: this.polyPointArray,
            strokeColor: '#4794f5',
            strokeOpacity: 1,
            fillColor: '#4794f5',
            fillOpacity: 0.3
          })
          this.map.add(this.polygonAfterDraw)
          this.isInPolygon() //收集信息
        }
      })
    },

五、收集圈内数据

        通过高德地图里面的数学计算公式

 数学计算库-参考手册-地图 JS API | 高德地图API

// 收集圈内点的数据
    isInPolygon() {
      this.dataList.forEach((item) => {
        if (
          // 判断点是否在我们画的这组数据内
          this.AMap.GeometryUtil.isPointInPolygon(item, this.polyPointArray)
        ) {
          console.log(item, "在区域内的标记点");
          this.selectedArr.push(item)
        }
      })
    },

 最终代码

        

<template>
  <div>
    <div id="container">

    </div>
    <button class="fang" @click="drawClick">画圈找房</button>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  data() {
    return {
      AMap: null, // 保存地图API，防止报错
      map: null,
      dataList: [
        [116.402394,39.937182, '北京南锣鼓巷'],
        [116.459844,39.872011, '北京古玩市场'],
        [116.410829,39.881913, '北京天坛'],
        [116.397029,39.917839, '故宫'],
        [116.385281,39.941862, '什刹海']
      ],
      // 是否处于画圈状态下
      drawing: false,
      // 是否处于鼠标左键按下状态下
      isMouseDown: false,
      // 存储画出折线点的数组
      polyPointArray: [],
      // 上次操作画出的折线
      lastPolyLine: null,
      // 画圈完成后生成的多边形
      polygonAfterDraw: null,
      selectedArr: []
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    // 收集圈内点的数据
    isInPolygon() {
      this.dataList.forEach((item) => {
        if (
          // 判断点是否在我们画的这组数据内
          this.AMap.GeometryUtil.isPointInPolygon(item, this.polyPointArray)
        ) {
          console.log(item, "在区域内的标记点");
          this.selectedArr.push(item)
        }
      })
    },
    // 初始化鼠标画圈事件
    initMapMouseHandle(AMap) {
      // 鼠标移动事件处理程序
      this.map.on('mousemove', (e) => {
        if (this.isMouseDown) {
          // 讲坐标添加到lastPolyLine数组中
          const point = [e.lnglat.lng, e.lnglat.lat]
          this.polyPointArray.push(point)
          // 如果已存在上一条折线，则移除
          if (this.lastPolyLine) {
            this.map.remove(this.lastPolyLine)
          }
          // 使用路径规划实现一个圆圈
          const polyline = new AMap.Polyline({
            path: this.polyPointArray,
            strokeColor: '#4794f5',
            strokeOpacity: 2
          })
          this.map.add(polyline)
          this.lastPolyLine = polyline
        }
      })
      // 鼠标按下事件处理程序
      this.map.on('mousedown', () => {
        // 移除上一条折线并初始化变量
        if (this.drawing) {
          this.lastPolyLine && this.map.remove(this.lastPolyLine)
          this.lastPolyLine = null
          this.polyPointArray = []
          this.isMouseDown = true
        }
      })
      // 鼠标松开事件处理程序
      document.addEventListener('mouseup', () => {
        if (this.drawing && this.isMouseDown) {
          // 退出画线状态，将 isMouseDown 设置为 false
          this.isMouseDown = false
          // 添加多边形覆盖物,设置为禁止点击
          this.polygonAfterDraw = new AMap.Polygon({
            path: this.polyPointArray,
            strokeColor: '#4794f5',
            strokeOpacity: 1,
            fillColor: '#4794f5',
            fillOpacity: 0.3
          })
          this.map.add(this.polygonAfterDraw)
          this.isInPolygon() //收集信息
        }
      })
    },
    // 开始画圈
    drawClick() {
      this.map.setStatus({
        doubleClickZoom: false, //是否开启双击缩放地图
        scrollWheel: false, //是否开启鼠标滚轮缩放地图
        dragEnable: false, //是否开启拖拽地图
        keyboardEnable: false //是否开启键盘操作地图
      })
      this.map.setDefaultCursor('pointer') //通过 setDefaultCursor 方法设置地图的默认鼠标指针样式
      this.drawing = true
    },
    // 取消画圈
    noDrawClick() {
      this.map.setStatus({
        doubleClickZoom: true,
        scrollWheel: true,
        dragEnable: true,
        keyboardEnable: true
      })
      this.map.setDefaultCursor('default')
      this.drawing = false
      this.selectedArr = []
      this.map.remove(this.lastPolyLine)
      this.map.remove(this.polygonAfterDraw)
    },
    // 初始化点
    initMapMarkers(AMap) {
      this.dataList.forEach((item) => {
        this.map.add(
          new AMap.Marker({
            position: [item[0], item[1]]
          })
        );
      });
    },
    initAMap() {
      AMapLoader.load({
        key: "77b6d297ec48b420b9daed7bb607b639", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
          this.AMap = AMap
          this.initMapMarkers(AMap) //调用初始化标记点事件
          this.initMapMouseHandle(AMap) //调用初始化画圈事件
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}

.fang {
  position: fixed;
  right: 15px;
  top: 100px;
}
</style>