仿链家地图找房_全网稀缺,完整链家地图找房的实现(一)
前一段时间我应公司的需求开发了类似链家地图找房的功能,然而我发现现在市面上,对于链家地图找房功能的完整实现相关的文章还是比较稀缺的,亦或是功能还不够完善,出于这个方面,我觉得把自己对于链家地图找房功能的完整实现分享出来还是很有必要的,包括其中的画圈找房,以及如何将整个地图找房拆分成一个个组件。
起步
1、效果预览图
2、准备工作
技术栈
vue全家桶 + vue-baidu-map + BMapLib
其中 vue-baidu-map 是第三方库,已经封装好了部分组件,直接用就行;BMapLib是百度开源库
组件拆分
地图容器组件:
区域气泡组件(自定义覆盖物):
区域边界组件:
周边房源气泡组件(自定义覆盖物):
周边房源详情覆盖物组件(自定义覆盖物):
画圈找房区域气泡组件:
画圈找房路径组件:
画圈找房提示组件:
周边房源总数提示组件:
地图初始化
首先,我们要做的就是地图初始化,这里用到的是 baidu-map 组件,
复制代码
参数说明:
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 => {
this.$set(this.center, 'lng', data[0])
this.$set(this.center, 'lat', data[1])
})
}
复制代码
至于 vue 跨组件的通信就好比打电话一样,需要一个基站,所以新建一个js文件(这里我命名为 connect)
import Vue from 'vue'
export default new Vue()
复制代码
然后在组件中引入即可,通过 connect.$emit('event', data) 派发一个事件,然后通过 connect.$on('event', data => {}) 侦听事件。
最后,还需要设置一下地图容器 baidu-map 的缩放等级(我设置的是12,具体可自己调整)和高度,不然是看不见效果的
.bm-view{
height: 100%; /* for example */
}
复制代码
效果如下:
区域气泡显示
在地图初始化之后,接下来就是如何将不同的区域显示在地图上了,这里我用到的是 bm-overlay 组件,并且将其二次封装成 zoneOverlay 组件。
v-for="(item, index) in zoneGeoPoints" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:text="item">
复制代码
zoneGeoPoints 表示区域数组,从后台接口获取,元素为对象,属性包括区域的经纬度等信息。
// zoneOverlay.vue
ref="customOverlay"
class="zone"
pane="labelPane"
@draw="draw">
{{text.name}}
{{text.houseCnt}}套
export default {
props: ['text', 'position', 'active'],
watch: {
position: {
handler () {
this.$refs.customOverlay.reload()
},
deep: true
}
},
methods: {
draw ({el, BMap, map}) {
const {lng, lat} = this.position
const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
el.style.left = pixel.x - 42 + 'px'
el.style.top = pixel.y - 42 + 'px'
}
}
}
.zone
transition: background-color .15s ease-in-out
display: flex
align-items: center
width: 84px
height: 84px
background-color: rgba(58,126,255,0.9)
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
color: #fff
font-size: 12px
text-align: center
padding: 10px
position: absolute
border-radius: 50%
box-shadow: 0 0 4px #999
box-sizing: border-box
&:hover
z-index: 1
background-color: rgba(240,65,52,.9)
color: #fff
div
display: flex
flex-wrap: wrap
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
justify-content: space-between
p
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: 100%
text-align: center
line-height: 16px
复制代码
el.style.left = pixel.x - 42 + 'px'
el.style.top = pixel.y - 42 + 'px'
是为了让气泡覆盖物正中心在其坐标点的位置,因为css的宽高均为84px,效果如下:
区域气泡的交互
区域气泡显示之后,现在让我们为他们增加点交互吧~
就是鼠标滑入某个区域气泡的时候,该气泡高亮,滑出的时候恢复,一开始我用的是mouseover和mouseleave事件,让 zone-overlay 动态绑定class,但是我发现气泡背景色的变化没有缓动效果,
v-for="(item, index) in zoneGeoPoints" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:text="item"
:class="zoneIndex === index ?'active':''"
@mouseover.native="selectZone(item, index)"
@mouseleave.native="cancelZone">
export default {
data () {
return {
zoneIndex: ''
}
},
methods: {
selectZone (item, index) {
this.zoneIndex = index
},
cancelZone () {
this.zoneIndex = ''
}
}
}
复制代码
修饰符native是为了让组件变成普通html标签,不然不会触发mouseover和mouseleave事件,效果如下:
为了增加缓动效果,后来我换用了css的hover伪类,取消鼠标事件,为了让大家看的清晰点,这里我设置了1s的缓动时间,
// zoneOverlay.vue
.zone
transition: background-color 1s ease-in-out
&:hover
z-index: 1
background-color: rgba(240,65,52,.9)
color: #fff
复制代码
效果如下:
再来点交互吧
我们希望当地图的缩放等级大于某一个值时,区域气泡消失,而小于该值时,区域气泡又出现,就像链家一样,在这个过程中我们就要实时获取地图当前的缩放等级 zoom,vue-baidu-map 给我们提供了一个api syncCenterAndZoom,具体使用如下:
v-for="(item, index) in zoneGeoPoints" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:text="item">
复制代码// 双向绑定 zoom
// ZOOMBOUNDARY 为常量,表示区域气泡消失或显示的 zoom 临界值
// const ZOOMBOUNDARY = 15
syncCenterAndZoom (e) {
this.zoom = e.target.getZoom()
this.showZone = this.zoom < ZOOMBOUNDARY
}
复制代码
效果如下:
区域边界的显示
区域边界用到的是 bm-boundary 组件,当鼠标划入某个区域气泡时,该区域的边界出现,而当鼠标滑出某个区域气泡时,该区域的边界消失,
复制代码
参数说明:
name 表示区域(行政区)的名字,例如上海市黄浦区,北京市朝阳区
strokeWeight 表示区域边界的边框宽度
strokeColor 表示区域边界的边框颜色
fillColor 表示区域边界的填充颜色
fillOpacity 表示区域边界的填充颜色透明度
v-for="(item, index) in zoneGeoPoints" :key="index"
:position="{lng: item.lng, lat: item.lat}"
:text="item"
@mouseover.native="selectZone(item, index)"
@mouseleave.native="cancelZone">
export default {
data () {
return {
showBoundary: false
}
},
methods: {
selectZone (item, index) {
this.zoneBoundary = `${this.posCity}${item.name}` // 行政区名字,只供参考
this.showBoundary = true
},
cancelZone () {
this.zoneBoundary = ''
this.showBoundary = false
}
}
}
复制代码
效果如下:
至此,有关区域的实现和交互基本结束~
由于地图找房的功能稍微复杂,所以我将其分为几个部分,这样也能够更清楚如何一步步实现此功能,至于后续部分还请大家慢慢等待啦~
写得不好的地方请轻喷~感谢阅读
仿链家地图找房_全网稀缺,完整链家地图找房的实现(一)相关推荐
- 门店定位怎么在地图上显示_门店位置如何显示在地图上?
随着科技的发展,智能手机的普及,如今不管在哪里只要有一个手机在手基本就不会迷路,通过手机地图寻找位置非常方便,及时比较偏的地方也可以通过地图去找到,那么对于门店商家而言,如何将自己的门店显示在地图上呢 ...
- 地图自定义图标_如何在H5里添加地图导航?这份教程请收藏!
智能手机的出现为我们的生活带来了翻天覆地的改变,比如说衣食住行都有了显著的变化.外卖让就餐更加方便.手机支付也让生活更加便利,地图导航功能更是让大家从此不再迷路,有了手机以后,大家都开始习惯直接用手机 ...
- python找零_【python算法书】硬币找零问题?
题目:窝窝要去商店买棒棒糖,她怎么样才能用最少个数的硬币买到心仪的糖果呢? 分析:找零问题的贪心算法求解.为了满足我们要用最少的硬币数量支付指定额度的金额这一要求,每次使用可选的最大金额付款符合一贯& ...
- vc6.0 debug 比 release 快??_全网稀缺的快应用开源项目熊宝儿歌故事QuickApp
开发本产品时快应用推出时间不久,网络上关于快应用的资料少之又少,本人也因公司需求进行开发,一路上摸索过来,并集成统计,完全遵循正式项目,今想把自己的一些经验分享出来,让大家少走弯路,如有错误和意见欢迎 ...
- unity三维地图的经纬度如何在二维地图上表示_安全数据分析:数据点—地图—线性回归...
一次性进群,长期免费索取教程,没有付费教程. 教程列表见微信公众号底部菜单 进微信群回复公众号:微信群:QQ群:460500587 微信公众号:计算机与网络安全 ID:Computer-network ...
- echart 地图 某个地区_一站式解决echarts实现区域地图
近期项目中有个大屏展示的需求,需要显示行政区的地图.苦苦寻找的过程中发现此方面资料很少且大部分在CSDN上付费下载,着实麻烦,特此总结,供大家参考. 直接上图 关键知识点 geo数据 geo是echa ...
- 门店定位怎么在地图上显示_怎么能让顾客在地图上搜索到自己店的位置?
百度地图: 如果你的店铺已经标注过了,就可以直接搜你店铺的名字就可以找到了,如果没有标注的话,需要先标注的. >百度 地图商户免费标注的方法: 1.打开百度地图首页,如果没有百度帐号的,可以去注 ...
- python画地图轨迹图_如何使用python在单张地图上绘制轨迹?
我正在处理如下所示的数据帧.x和y是轨迹随时间变化的墨卡托x,y坐标.具有相同航向的行是属于同一轨迹的点.我们可以看到,所有0的行分隔了不同的轨迹.在VoyageID X Y Time 27 2 -7 ...
- android高德地图获取海拔_在vue中使用高德地图开发,以及AMap的引入?
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
最新文章
- Go 学习笔记(71)— Go 接口 interface (接口定义、接口实现、接口调用、值接收者、指针接收者)
- 【零基础入门数据挖掘】-特征工程
- 全球变暖java_第九届 蓝桥杯 JavaB组 全球变暖
- OpenShift 4 - DevSecOps Workshop (3) - 从PipelineResource、Task到一个简单的Pipeline
- 浙大 PAT 乙级1056
- wwwscan网站目录文件批量扫描工具
- 产品经理面试必备常见10道题及解析
- java中怎么画弧线加粗,CAD中怎么把一段线、曲线或圆弧加粗
- TANGENT_SPACE_ROTATION的解释
- 在Geany里配置python3的方法!!!含window10下载Geany过程
- ax的范数最大_什么是范数(详细)?
- quectel(短消息服务命令)9
- hadoop2.8.2 YARN 架构
- 【Python】快速排序求第N大的数字
- Nginx配置从域名A跳转到域名B
- php ppt read_PHP读取PPT文件的方法
- Tampermonkey油猴-脚本插件
- MySQL修改字段类型之modify
- IEEE Transactions模板中参考文献作者缩写、期刊名缩写
- 《平衡》(Ballance)--我正在奋斗的游戏