uniapp + vue3微信小程序开发(6)地图展示
uniapp + vue3微信小程序开发(6)地图展示
·
在用小程序地图时,我们基本都会用默认的map组件,然后这组件会跟你手机默认内置地图有关,一般都是微信地图
1、map组件详解
其实我们常用的就那么几个,latitude:当前地图的纬度,longitude:当前地图的经度,很多时候我们都会调用 uni.getLocation 来获取我们当前经纬度位置,markers 为覆盖物列表,@tap事件为地图事件,@callouttap为覆盖物事件
但是我们在使用覆盖物时,需要注意,安卓端,ios端,开发工具客户端显示的都有所区别哦
2、覆盖物展示
既然根据系统展示有所区分,那么我们就要一进路由,就要先进行判断,大概来说,安卓机和微信开发工具上都是展示差不多的,只有ios机区别很大
// 获取当前手机的系统
const phoneType = ()=>{
uni.getSystemInfo({
success(res) {
// res.platform - 客户端平台,值域为:ios、android、mac(3.1.10+)、windows(3.1.10+)、linux(3.1.10+)
// 苹果手机的数字使用callout,安卓的数字使用label
if (res.platform == 'ios') {
filterOilmap('callout')
} else {
filterOilmap('customCallout')
}
}
})
}
const filterOilmap = (e)=>{
oilList.value = oilList.value.map((item,index) =>{
if(e == 'callout'){
return {
...item,
iconPath: '/static/img/oil-site-active.png',
width: 32,
height: 32,
[e]: {
content: item.name,
anchorY: 30,
anchorX: 0,
display: 'ALWAYS',
}
}
}else{
return {
...item,
iconPath: '/static/img/oil-site.png',
[e]: {
anchorY: 30,
anchorX: 0,
display: 'ALWAYS',
}
}
}
})
}
开发工具展示截图:
ios真机截图:
3、地图宽高计算
小程序涉及到dom宽高计算,总是麻烦的,我们想让当前页面的剩余高度来都展示地图,应该怎么做呢?
uni.createSelectorQuery().select(".map").boundingClientRect(data => {
mapHeight.value = (data.top*2)+40
}).exec();
我们在一进来,就计算要展示的高度,然后组件如下,用100vh减去我们地图dom当前的距离顶部的高度:
<view class="map" :style="{height:`calc(100vh - ${mapHeight}rpx)`}">
<map style="width: 100%;height: 100%;" :latitude="oilList[0].lat" :longitude="oilList[0].lon" :markers="oilList" @tap="mapTap" @callouttap="markertap" id="map">
<cover-view slot="callout">
</cover-view>
</map>
</view>
更多推荐
已为社区贡献7条内容
所有评论(0)