小程序实现地图找房功能

思路解析：使用小程序的 map 地图组件，markers 标记点数据集合用来生产地图上的标记，用callout 或者label 实现气泡，本文使用的是callout ，最后如何实现点击气泡更新下方展示数据，使用到的是 markers的id属性(注意一定是数字类型不可是字符串)

最终实现效果图

语法使用的是uniapp，原生小程序和uniapp实现方式大致一致
html

<template><view class="owarp"><view class="head">...</view><!-- 地图展示区域 --><view class="center"><map id="map" :scale="scale":latitude="lat" :longitude="lng" :markers="markers"show-location=true@regionchange="changeRegion"@callouttap="handleCallout"></map>  </view><view @click="returnCur" class="gps flex column acenter jcenter"><image class="icon44" src="/static/images/home/homesearch.png" mode=""></image><view class="fs20">定位</view></view><view class="foot"><view class="flex"><image class="imgradus" :src="roomData.main_picture" mode="aspectFill"></image><view class="ml20"><view class="fs32 b">{{roomData.hotel_name}}</view><view class="fs24 c8c mt6 w500 ellipsis">距您约 {{roomData.distance}} km</view><view class="flex acenter mt6"><image class="icon22" src="/static/images/location.png" mode=""></image><view class="fs24 w500 ellipsis">{{roomData.hotel_address}}</view></view><view class="mt6"><text class="b fs24 red">￥</text><text class="b fs40 red">{{roomData.lowest_price}}</text><text class="fs24 c8c">起</text></view></view></view><scroll-view class="itemHeight mt20" scroll-x="true"><view class="itemdata" v-for="(item,i) in roomData.room_type" :key="i"><view class="flex h174 acenter column between"><view class="fs28 themeColor tittop ellipsis">{{item.room_type_name}}</view><view class="fs24 themeColor mt7">{{item.desc}}</view><view class="mt7"><text class="b fs22 red">￥</text><text class="b fs34 red">{{item.current_price}}</text></view></view></view></scroll-view></view></view>
</template>

<script>
export default {data(){return{lat:'',lng:'',scale:13,roomData:'',markers:[],localtion:'',mapCtx:''}},onShow() {//获取用户定位经纬度this.localtion = uni.getStorageSync('localtion')?JSON.parse(uni.getStorageSync('localtion')):''this.lat = this.localtion.latthis.lng = this.localtion.lng},mounted(){this.getData()},methods:{getData(){ //获取数据生成markers标记this.$http('xxx', 'POST', {  //换成自己的接口lng: this.localtion.lng,lat:this.localtion.lat,city_id:this.address.code}).then((res) => {var maplist = res.data.listthis.setMarkers(maplist)})},getRoomType(markId){  //获取对应的数据渲染最下方内容this.$http('xxx', 'POST', {lng: this.localtion.lng,lat:this.localtion.lng,hotel_id:markId}).then((res) => {this.roomData = res.data})},changeRegion(){ //中心点标记始终在地图中心位置不动let that = this;this.mapCtx = uni.createMapContext('map');this.mapCtx.getCenterLocation({success(res) {const latitude = res.latitudeconst longitude = res.longitudethat.lat=latitudethat.lng=longitude}})},handleCallout(e){  //点击气泡获取验薪数据var markId = e.detail.markerIdthis.getRoomType(markId)},returnCur(){ //点击定位图片 设置中心点回到最原始的位置this.lat = this.localtion.latthis.lng = this.localtion.lng},setMarkers(maplist){  //设置标记点//具体属性含义和用法可参照官方文档maplist.forEach((item)=>{this.markers.push({latitude: item.lat,longitude: item.lng,id:item.hotel_id,    //id 要为数字类型，不能为字符串（字符串会生成其他的值和绑定值不一致）callout:{content:item.hotel_name+' '+'￥'+item.current_price+'起',bgColor:'#078591',color:'#fff',padding:'5',fontSize:'13',display:'ALWAYS',textAlign:'center',borderRadius:'14',padding:'7'}}) })}}
}
</script>

css

<style lang="scss" scoped>
.head{height: 86rpx;background: #fff;padding: 0 30rpx;.tobtm{width: 10rpx;height: 10rpx;}
}
.mt7{margin-top: 7rpx;
}
.w500{width: 500rpx;
}
.fb{color: #FB5E5E;
}
.imgradus{width: 160rpx;height: 160rpx;border-radius: 9rpx;
}
.center{width: 750rpx;height:calc(100vh - 545rpx);
}
#map{width: 750rpx;height: 100%;position: relative;.img-map{position: absolute;width: 26rpx;height: 40rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
}
.gps{position: fixed;bottom: 550rpx;right: 30rpx;width: 84rpx;height: 84rpx;background: #FFFFFF;border-radius: 10rpx;border: 1px solid #ABABAB;
}
.foot{height: 459rpx;background: #fff;position: fixed;bottom: 0;width: 100%;border-radius: 24rpx 24rpx 0 0;padding: 40rpx 30rpx;box-sizing: border-box;.itemHeight{height: 175rpx;width: 100%;white-space: nowrap;.itemdata{width: 260rpx;height: 174rpx;background: #EBF5F6;border-radius: 10rpx;display: inline-block;margin-right: 20rpx;box-sizing: border-box;}.h174{padding: 20rpx;height: 174rpx;box-sizing: border-box;}.tittop{width: 220rpx;text-align: center;}}
}
</style>

到此结束

小程序实现地图找房功能相关推荐

vue百度地图三级缩放，实现地图找房功能，vue-baidu-map
文章目录前言一.安装vue-baidu-map 二.使用步骤(只记录使用方法) 1.实现效果 2.实现功能总结前言使用vue-baidu-map实现三级地图缩放实现地图找房功能,在第三级使用 ...
Java开发导入腾讯地图描点_腾讯地图点聚合开发-实现地图找房功能
链家实现的效果分析链家的地图找房主要分为三层.第一层为市区层,比如南山.罗湖等:第二层为片区,比如南头.科技园等:第三层则为小区. 因为第一层,第二层的数据没有那么多,这两个接口都是把所有的数据一 ...
腾讯地图实现地图找房功能
链家实现的效果最近接到一个需求,需要使用鹅厂地图实现类似链家网的地图找房功能,然后我去网上看了一下,基本上使用的都是百度地图.于是我打算自己稍微封装一下,可以在使用的时候更加的方便. 01. 分析 ...
百度地图——地图找房功能
代码地址:https://github.com/huiyan-fe/BMapGLLib HouseSearchService层 package cn.itcast.baidumap. ...
仿链家地图找房_全网稀缺，完整链家地图找房的实现(一)
前一段时间我应公司的需求开发了类似链家地图找房的功能,然而我发现现在市面上,对于链家地图找房功能的完整实现相关的文章还是比较稀缺的,亦或是功能还不够完善,出于这个方面,我觉得把自己对于链家地图找房功能 ...
腾讯地图点聚合应用之地图找房
链家实现的效果分析地图找房功能使用点聚合来实现的.官网示例如下:https://lbs.qq.com/javascript_v2/sample/overlay-markercluster.html ...
用vue仿贝壳地图找房功
用vue仿贝壳地图找房功能主要实现: 通过baidu-map 实现鼠标滚动缩放地图级别,同时控制行政区划气泡的展示和隐藏: 放大地图,行政区划气泡消失,同时展示改行政区划下面的房源信息,我这里展示的是 ...
高德地图找房 # 编程大实践 # Python # 嵩天 # cilay
高德地图找房一.项目背景 1.高德开放平台高德开放平台是国内技术领先的LBS服务提供商,拥有先进的数据融合技术和海量的数据处理能力. 服务超过三十万款移动应用,日均处理定位请求及路径规划数百亿次. ...
uniapp 小程序map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
文章目录前言一.使用uniapp 原生的map 组件二.发现坑1 三.分析ui图----发现坑2 四.发现坑3 四.发现坑4 五.发现坑5 ----------------很重要,楼主花费了好长 ...

小程序实现地图找房功能

小程序实现地图找房功能相关推荐

最新文章

热门文章