山东大学项目实训——地图圈系统——微信小程序(4)
作者:互联网
地图圈系统——微信小程序(4)
一、地图卫星云图显示
微信小程序的map组件可以添加卫星云图显示功能
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
enable-satellite | boolean | false | 否 | 是否开启卫星图 |
在regeo.wxml中添加如下代码:
<cover-image class="map-qiehuan" wx-if="{{showweixing}}" src="../../src/images/wx2.png" bindtap="onChangeweixing"></cover-image>
<cover-image class="map-qiehuan" wx-if="{{!showweixing}}" src="../../src/images/wx1.png" bindtap="onChangeweixing"></cover-image>
在regeo.js中添加如下代码:
onChangeweixing() {
if (this.data.showweixing) {
this.setData({
showweixing: false,
});
} else {
this.setData({
showweixing: true,
});
}
},
在regeo.wxss中添加如下代码:
.map-qiehuan {
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
/* color: #fff; */
text-align: center;
/* background: #fff; */
/* border-radius: 40rpx; */
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
top: 200rpx;
right: 30rpx;
/* transform: translate(-50%,0); */
}
}
效果图如下:
二、实时路况显示
微信小程序map组件有实时路况功能
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
enable-traffic | boolean | false | 否 | 是否开启实时路况 |
在regeo.wxml中添加如下代码:
<cover-image class="map-lukuang" wx-if="{{isRealTraffic}}" src="../../src/images/luk2.png" bindtap="onChangeTraffic"></cover-image>
<cover-image class="map-lukuang" wx-if="{{!isRealTraffic}}" src="../../src/images/luk1.png" bindtap="onChangeTraffic"></cover-image>
在regeo.js中添加如下代码:
onChangeTraffic(event) {
if (this.data.isRealTraffic) {
this.setData({
isRealTraffic: false,
});
} else {
this.setData({
isRealTraffic: true,
});
}
},
在regeo.wxss中添加如下代码:
.map-lukuang {
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
/* color: #fff; */
text-align: center;
/* background: #fff; */
/* border-radius: 40rpx; */
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
top: 280rpx;
right: 30rpx;
/* transform: translate(-50%,0); */
}
效果图如下:
三、回到原始位置
地图组件上增加一个回到原始位置的功能
在regeojs文件中添加如下代码:
controls: [
{
id: 0,
position: {
left: 270,
top: 200,
width: 40,
height: 40
},
iconPath: "../../src/images/yuan.png",
clickable: true
}
],
clickcontrol(e) {
console.log("回到用户当前定位点");
var markers = this.data.markers
var a = []
a.push(markers[0])
markers = a
var bottom = {
title: this.data.name,
addr: this.data.address,
latitude: this.data.latitude,
longitude: this.data.longitude,
}
this.setData({
markers,
showbottom: false,
bottom
})
this.onLoad();
},
效果如下:
点击右侧瞄准按钮,即可回到当前位置
方法clickcontrol(e)打印以下内容:
标签:src,..,80rpx,微信,如下,实训,regeo,山东大学,data 来源: https://blog.csdn.net/weixin_44181723/article/details/115493449