uniapp使用map组件设置自定义气泡
前段时间做了一个app端地图的页面，记录一下
官方的文档只告诉了我们怎么设置自定义气泡，没有说具体怎么实现，插槽名叫什么文章来源：https://www.toymoban.com/news/detail-543610.html
下面是一个案例，插槽名叫callout，使用时必须用< cover-view >标签包裹，不然它的层级不够，显示不到地图上面。文章来源地址https://www.toymoban.com/news/detail-543610.html
<template>
<view class="indexView">
<view style="width: 750rpx;" :style="{height: screenHeight + 'px'}">
<map style="width: 750rpx;" :style="{height: (screenHeight-100) + 'px'}" :latitude="latitude"
:longitude="longitude" :markers="covers" id="map1" ref="map1" @callouttap='callouttap'>
<!-- 自定义气泡 -->
<cover-view slot="callout">
<cover-view class="customCallout" :marker-id="2">
<dw-img class="cus_bg" name="index_bigzheng" :size="[169, 115]"></dw-img>
<dw-img class="head_img" name="index_defult_head" :size="42" />
<text class="me">我</text>
</cover-view>
</cover-view>
</map>
</view>
</view>
</template>
<script>
let that = ''
export default {
data() {
return {
// 一些基本绑定参数
id: 1, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: "",
longitude: '',
lastAddress: '',
currentTime: '',
covers: [],
screenHeight: 0,
}
},
onReady() {
this.getLocation()
},
onShow() {
},
onLoad() {
this.screenHeight = uni.getSystemInfoSync().windowHeight;
this.screenWidth = uni.getSystemInfoSync().windowWidth;
that = this
},
methods: {
getLocation() {
let aData = new Date();
let dateValue = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate() + ' ' + aData
.getHours() + ':' + aData.getMinutes() + ':' + aData.getMilliseconds()
this.currentTime = dateValue
let that = this
uni.getLocation({
type: 'wgs84',
geocode: true,
success: (res) => {
console.log('当前位置的经度：' + res.longitude);
// res.address只有在ios才有效果，安卓和pc没用
if (res.address) {
let {
province = '',
city,
district,
street,
streetNum
} = res.address
console.log('详细地址：' + (province ?? '') + (city ?? '') + district +
street + (streetNum ?? ''));
that.lastAddress = (province ?? '') + (city ?? '') + district +
street + (streetNum ?? '')
}
that.longitude = res.longitude
console.log('当前位置的纬度：' + res.latitude);
that.latitude = res.latitude
that.covers = [{
id: 2,
latitude: res.latitude,
longitude: res.longitude,
// title: '我的位置',
width: '42rpx',
height: '54rpx',
iconPath: '/static/images/index_location.png',
// 自定义气泡customCallout
customCallout: {
display: 'ALWAYS',
anchorX: 0,
anchorY: 15,
},
}]
const myItem = {
id: 0,
lat: that.latitude,
lng: that.longitude,
mobile: user.mobile,
createTime: new Date().getTime(),
address: that.lastAddress
}
uni.setStorageSync('myItem', myItem);
that.myItem = myItem
that.setMyItem(myItem)
that.pushLocation()
},
fail: function(err) {
console.log("获取定位失败", err);
uni.showToast({
title: '获取定位失败',
icon: 'none'
});
}
})
},
// 把中心坐标移动到地图中心
moveToLocation() {
this.getLocation()
this.$refs.map1.moveToLocation({
longitude: this.longitude,
latitude: this.latitude,
success: (res) => {}
})
},
pushLocation() {
// nvue文件调用接口方式，只支持这种
uni.request({
url: baseURL + '/v1/locationInfo',
method: 'POST',
// 请求头
header: {
'Authorization': uni.getStorageSync('Authorization'),
'content-type': 'application/json',
},
data: {
address: this.lastAddress,
lat: this.latitude,
lng: this.longitude,
userId: user.id,
mobile: user.mobile,
...apkInfo,
...device,
},
success: function(res) {
console.log('===========> ', res); // 服务器返回的数据
uni.setStorageSync('timer', nowTimer);
},
fail(err) {
console.log('===========', err);
}
})
},
}
}
</script>
到了这里，关于uniapp使用map组件设置自定义气泡的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
