全网稀缺，完整链家地图找房的实现(一)

前一段时间我应公司的需求开发了类似链家地图找房的功能，然而我发现现在市面上，对于链家地图找房功能的完整实现相关的文章还是比较稀缺的，亦或是功能还不够完善，出于这个方面，我觉得把自己对于链家地图找房功能的完整实现分享出来还是很有必要的，包括其中的画圈找房，以及如何将整个地图找房拆分成一个个组件。

目前项目已上线，猛戳这里体验～(仅支持pc端)

起步

1、效果预览图

2、准备工作

• 技术栈

vue全家桶 + vue-baidu-map + BMapLib

其中 vue-baidu-map 是第三方库，已经封装好了部分组件，直接用就行;BMapLib是百度开源库

• 组件拆分

地图容器组件: <baidu-map></baidu-map>

区域气泡组件(自定义覆盖物): <zoneOverlay></zoneOverlay>

区域边界组件: <bm-boundary></bm-boundary>

周边房源气泡组件(自定义覆盖物): <aroundOverlay></aroundOverlay>

周边房源详情覆盖物组件(自定义覆盖物): <detailOverlay></detailOverlay>

画圈找房区域气泡组件: <bm-polygon><bm-polygon>

画圈找房路径组件: <bm-polyline></bm-polyline>

画圈找房提示组件: <drawToast></drawToast>

周边房源总数提示组件: <dataToast></dataToast>

地图初始化

首先，我们要做的就是地图初始化，这里用到的是 baidu-map 组件，

<div class="map-wrapper">
    <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
</div>
复制代码

参数说明：

center 表示地图的中心点坐标，例如{ lng: 116.404, lat: 39.915 }

zoom 表示地图的缩放等级

scroll-wheel-zoom 表示是否开启滚轮缩放

ready事件表示地图加载完成后需要的操作，例如设置地图中心点坐标 center，或者是获取 BMap、map 类等等

handler ({ BMap, map }) {
    // lng, lat 表示你要设置的经纬度
    this.$set(this.center, 'lng', lng)
    this.$set(this.center, 'lat', lat)
    console.log(BMap) // just console.log(BMap)
    console.log(map) // just console.log(map)
}
复制代码

在这里，我是先定位获取当前省份的经纬度，通过事件传递，然后设置 center

handler ({BMap, map}) {
  this.initGeo()
},
initGeo () {
  connect.$on('cityGeoOk', data => {