山东大学项目实训——地图圈系统——微信小程序（4）

本文主要是介绍山东大学项目实训——地图圈系统——微信小程序（4），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

地图圈系统——微信小程序（4）

• • 一、地图卫星云图显示
  • 二、实时路况显示
  • 三、回到原始位置

一、地图卫星云图显示

微信小程序的map组件可以添加卫星云图显示功能

在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组件有实时路况功能

在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)打印以下内容：

这篇关于山东大学项目实训——地图圈系统——微信小程序（4）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！