uniapp小程序实现地图多个标记点
实现效果图:
步骤一: 引入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 = thisuni.getLocation({type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标// 是否解析地址信息（仅App平台支持（安卓需指定 type 为 gcj02 并配置三方定位SDK））geocode: true,success: function(res) {that.longitude = res.longitudethat.latitude = res.latitudethat.circles[0].latitude = res.latitudethat.circles[0].longitude = res.longitudethat.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 = 1this.datatList = []this.getList()},//获取列表async getList() {uni.showLoading({title: "加载中",mask: true, //是否显示透明蒙层，防止触摸穿透})//写接口请求if (res.data.code == 1) {const {list,count} = res.data.datathis.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 = truethis.status = 'more'} else {this.hasmore = falsethis.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 = truethis.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官网