实现效果图:
步骤一: 引入uniapp自带的地图组件,设置地图样式宽高
<map id="myMap" class="map-view" :longitude="longitude" :latitude="latitude"
:scale="scale" :markers="markers" @markertap="handleMarkerTap" :circles="circles" :show-location="true"
@callouttap="handleCalloutTap"></map>
步骤二:data中定义地图的相关参数
//以当前位置坐标为圆心
circles: [{
latitude: 39.908580, // 圆心纬度
longitude: 116.397428, // 圆心经度
color: '#2A5CAA33', // 圆颜色
fillColor: '#2A5CAA33', // 圆内填充颜色，可选
radius: 2000, // 圆半径，单位m
}],
longitude: 116.397428, // 示例经纬度(先写死一个,否则标记点不显示)，可根据实际定位获取
latitude: 39.908580, // 示例经纬度(先写死一个,否则标记点不显示)，可根据实际定位获取
scale: 14,//地图缩放
markers: [], //标记点
location: "",
步骤三: 获取当前位置坐标并动态设置地图相关参数
//获取当前位置坐标
chooseLocation() {
const that = this
uni.getLocation({
type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
// 是否解析地址信息（仅App平台支持（安卓需指定 type 为 gcj02 并配置三方定位SDK））
geocode: true,
success: function(res) {
that.longitude = res.longitude
that.latitude = res.latitude
that.circles[0].latitude = res.latitude
that.circles[0].longitude = res.longitude
that.location = res.longitude + ',' + res.latitude
}
});
},
步骤四:从接口中获取列表参数设置标记点
async getList() {
uni.showLoading({
title: "加载中",
mask: true, //是否显示透明蒙层，防止触摸穿透
})
//写接口请求
if (res.data.code == 1) {
const {
list,
count
} = res.data.data
this.triggered = false;
this.isfreshing = false;
//处理地图标记点
const mapMarks = list.map(item => {
return {
id: Number(item.id),
longitude: item.location.split(',')[0],
latitude: item.location.split(',')[1],
title: item.title,
iconPath: '/static/home/address_map.png', // 可自定义标记点(需要注意,必须写成绝对路径,相对路径不生效)
width: 18, //自定义图标宽
height: 18, //自定义图标高
anchor: {
x: 0.5,
y: 1
}, // 锚点位置，使标记点底部中心对准坐标点
zIndex: 100,
//自定义坐标点内容展示
callout: {
content: `{item.area.split('/')\[2\]}\|{item.month_money}起|${item.square}m²`,
color: '#ffffff',
bgColor: '#2A5CAA',
padding: 6,
borderRadius: 6,
display: 'ALWAYS',
textAlign: 'center',
fontSize: 12
}
}
})
this.markers = [...this.markers, ...mapMarks]
this.datatList = [...this.datatList, ...list]
if (this.datatList?.length < count) {
this.hasmore = true
this.status = 'more'
} else {
this.hasmore = false
this.status = 'noMore'
}
uni.hideLoading()
} else {
uni.hideLoading()
}
},
根据经纬度导航功能:
//点击导航
handleNavigation(item) {
//地图导航
const arr = item.location.split(',')
uni.openLocation({
latitude: arr[1] * 1,//必传
longitude: arr[0] * 1,//必传
name: item.address,
success: function() {
console.log('success');
}
});
},
完整代码:
<template>
<view class="common_page_min">
<Navbar title="地图找房" />
<view class="search-page">
<!-- 地图区域 -->
<map id="myMap" class="map-view" :longitude="longitude" :latitude="latitude" :scale="scale"
:markers="markers" @markertap="handleMarkerTap" :circles="circles" :show-location="true"
@callouttap="handleCalloutTap"></map>
<!-- 房源列表 -->
<scroll-view class="house-list container mt16" v-if="datatList&&datatList.length>0" scroll-y="true"
@scrolltolower="lower" lower-threshold="50" refresher-enabled :refresher-triggered="triggered"
@refresherrefresh="onRefresh">
<view class="map-house-item" v-for="item in datatList" :key="item.id">
<!-- 写列表样式 -->
</view>
<!-- 底部加载更多 -->
<uni-load-more :status="status"></uni-load-more>
<view style="height: 60px;">
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import {
getBusinessListApi,
getAreasListApi
} from "@/request/api.js";
export default {
data() {
return {
//以当前位置坐标为圆心
circles: [{
latitude: 39.908580, // 圆心纬度
longitude: 116.397428, // 圆心经度
color: '#2A5CAA33', // 圆颜色
fillColor: '#2A5CAA33', // 圆内填充颜色，可选
radius: 2000, // 圆半径，单位m
}],
longitude: 116.397428, // 示例经纬度(先写死一个,否则标记点不显示)，可根据实际定位获取
latitude: 39.908580, // 示例经纬度(先写死一个,否则标记点不显示)，可根据实际定位获取
scale: 14, //地图缩放
markers: [], //标记点
location: "",
// 房源列表数据
datatList: [],
currentPage: 1, // 当前页
pageSize: 10, // 每页数据量
status: 'more', // 加载状态，'more' 表示有更多数据，'loading' 表示加载中，'noMore' 表示没有更多数据
hasmore: true,
viewMode: 'map', // 'map' 或 'list'
triggered: false,
isfreshing: false,
};
},
onShow() {},
onLoad(options) {
this.viewMode = options.viewMode || 'list'
this.chooseLocation()
},
methods: {
//获取当前位置坐标
chooseLocation() {
const that = this
uni.getLocation({
type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
// 是否解析地址信息（仅App平台支持（安卓需指定 type 为 gcj02 并配置三方定位SDK））
geocode: true,
success: function(res) {
that.longitude = res.longitude
that.latitude = res.latitude
that.circles[0].latitude = res.latitude
that.circles[0].longitude = res.longitude
that.location = res.longitude + ',' + res.latitude
//获取数据列表接口
that.firstgetOrderList()
}
});
},
// 处理气泡点击事件
handleCalloutTap(e) {
console.log('气泡====', e);
// const markerId = e.markerId;
// const marker = this.markers.find(item => item.id === markerId);
// if (marker) {
// uni.showModal({
// title: marker.title,
// content: `你点击了${marker.title}的信息气泡`,
// showCancel: false
// });
// }
},
// 标记点点击事件
handleMarkerTap(e) {
const markerId = e.markerId;
// 可根据标记点 ID 做对应逻辑，比如定位到房源详情等
console.log('点击了标记点', markerId);
},
//刷新
firstgetOrderList() {
this.currentPage = 1
this.datatList = []
this.getList()
},
//获取列表
async getList() {
uni.showLoading({
title: "加载中",
mask: true, //是否显示透明蒙层，防止触摸穿透
})
//写接口请求
if (res.data.code == 1) {
const {
list,
count
} = res.data.data
this.triggered = false;
this.isfreshing = false;
//处理地图标记点
const mapMarks = list.map(item => {
return {
id: Number(item.id),
longitude: item.location.split(',')[0],
latitude: item.location.split(',')[1],
title: item.title,
iconPath: '/static/home/address_map.png', // 可自定义标记点(需要注意,必须写成绝对路径,相对路径不生效)
width: 18, //自定义图标宽
height: 18, //自定义图标高
anchor: {
x: 0.5,
y: 1
}, // 锚点位置，使标记点底部中心对准坐标点
zIndex: 100,
//自定义坐标点内容展示
callout: {
content: `${item.area.split('/')[2]}|${item.month_money}起|${item.square}m²`,
color: '#ffffff',
bgColor: '#2A5CAA',
padding: 6,
borderRadius: 6,
display: 'ALWAYS',
textAlign: 'center',
fontSize: 12
}
}
})
this.markers = [...this.markers, ...mapMarks]
this.datatList = [...this.datatList, ...list]
if (this.datatList?.length < count) {
this.hasmore = true
this.status = 'more'
} else {
this.hasmore = false
this.status = 'noMore'
}
uni.hideLoading()
} else {
uni.hideLoading()
}
},
//点击导航
handleNavigation(item) {
//地图导航
const arr = item.location.split(',')
uni.openLocation({
latitude: arr[1] * 1,//必传
longitude: arr[0] * 1,//必传
name: item.address,
success: function() {
console.log('success');
}
});
},
lower(e) {
this.status = 'loading'
if (this.hasmore) {
this.status = 'loading'
this.currentPage++
this.getList()
} else {
this.status = 'noMore'
}
},
onRefresh() {
console.log('下拉刷新===');
if (!this.triggered) {
if (this.isfreshing) return;
this.isfreshing = true;
if (!this.triggered) {
this.triggered = true;
}
this.status = 'more' // 加载状态，'more' 表示有更多数据，'loading' 表示加载中，'noMore' 表示没有更多数据
this.hasmore = true
this.firstgetOrderList()
}
},
}
};
</script>
<style lang="scss" scoped>
.search-page {
width: 100%;
height: calc(100vh - 110px);
overflow: hidden;
display: flex;
flex-direction: column;
}
.map-view {
width: 750rpx;
height: 500rpx; // 使用 rpx 适配不同设备
}
</style>更多地图相关功能api参考官网:map | uni-app官网