恋家成果效果分析地图找房功能是使用点聚合实现的。官网示例如下：https://lbs.qq.com/javascript...链家地图主要分为三层。一层为市区，如南山、罗湖等；二层为南投、科技园等区域；三楼是社区。因为第一层和第二层没有那么多数据，所以这两个接口一次性把所有数据返回给前端。但是第三层的数据量是非常庞大的。链家采用返回部分数据，将前端页面显示的最大经纬度传给后台，后台将过滤后的数据返回给前端。（接口地址可以使用Chrome的开发工具抓包，这里要注意链家的接口是jsonp的形式，所以需要抓取JS。）实现首先需要添加API腾讯地图。这里推荐使用异步加载的方式。由于项目使用Vue开发单页应用，用户可能没有进入地图搜索页面，所以建议在打开地图搜索页面时添加腾讯地图API。异步加载需要避免一个重复加载的问题，即无论用户打开地图找房子多少次，地图的API都是一样的。为了降低代码的复杂度，这里没有使用单例模式。具体代码如下：constTXMap={map:undefined,//map实例//异步加载获取apigetApi(funName){letscript=document.createElement('script')script.type='text/javascript'script.src=`http://map.qq.com/api/js?v=2.exp&callback=${funName}`document.body.appendChild(script)}}可以看到异步加载是动态加载的添加script标签，src为腾讯地图api的地址，src中包含一个回调参数，表示加载js后会调用funName函数。地图api添加后，window对象会有一个qq.maps对象，我们可以通过它来判断是否添加了api，避免重复添加api。下一步是实现自定义覆盖方法。还是参考官方文档：https://lbs.qq.com/javascript...constTXMap={map:undefined,overlays:[],//storealloverlayssourceData:[],//原始数据listener:undefined,//地图缩放或平移的事件监听器getApi(){},/*之前声明过，这里省略*///实现自定义覆盖drawOverlay(options){let_this=this//下面有多个window对象的方法，避免了this的指向问题this.sourceData=options.data//存储原始数据//在绘制overlay之前，清除之前绘制的overlaythis.clearOverlays()//如果initMap方法已经被实现了，那么我们可以直接调用，否则需要定义if(window.initMap===undefined){window.initMap=function(){}//绘制overlays的具体实现//如果mapapi没有导入，调用getApi方法，否则直接调用initMap()window.qq===undefined?this.getApi('initMap'):window.initMap()}else{window.initMap()}},//清除自定义覆盖clearOverlays(){letoverlaywhile(overlay=this.overlays.pop()){overlay.onclick=null//移除点击事件overlay.parentNode.removeChild(overlay)//移除dom元素}},//调用Vue组件的beforeDestroy,Resetmap,removetimeasalistener,避免内存泄漏clearMap(){this.map=undefinedif(this.listener){window.qq.maps.event.removeListener(this.listener)}}}这个地图找房子的架子到这里差不多就搭好了，我们来看看绘制overlay具体实现，即initMap方法window.initMap=function(){if(_this.map===undefined){//当地图对象未定义时，需要绘制地图_this.map=newwindow.qq.maps.Map(document.getElementById(options.containerId),{//初始化地图中心center:newwindow.qq.maps.LatLng(options.lat||22.702,options.lng||114.09),//初始化缩放级别zoom:options.zoom||10,//地图最小缩放级别minZoom:10,//禁用缩放控件zoomControl:false,//禁用地图类型控件mapTypeControl:false})//空闲事件，地图缩放后触发orpanned_this.listener=window.qq.maps.event.addListener(_this.map,'idle',()=>{//获取当前地图可见范围的最大和最小经纬度letbounds=_this.map.getBounds()//获取当前地图的缩放级别letzoom=_this.map.getZoom()//调用Vue组件的空闲事件处理程序options.callback&&options.callback(bounds,zoom)})}//自定义叠加层if(wind噢。CustomOverlay===undefined){window.CustomOverlay=function(lat,lng,name,houseCount){//调用地图api计算overlay的位置this.position=newwindow.qq.maps.LatLng(lat,lng)this.name=name//地区名this.houseCount=houseCount//房屋数量}//继承Overlaywindow.CustomOverlay.prototype=newwindow.qq.maps.Overlay()//自定义覆盖构造函数，定义覆盖的DOM结构、DOM结构和样式。大家可以根据自己的需要自己画。window.CustomOverlay.prototype.construct=function(){letdiv=this.div=document.createElement('div')div.className='my-overlay'//覆盖类名//覆盖html结构this.div。innerHTML=`
