大二 Web 课程大作业——小程序标点地图

  • A+
所属分类:javascript 作业 html+css

web 开发实践课的大作业。本次小程序设计主要围绕 map 组件展开。

我们组设计了一款能够记录地图上的标点信息,并将自己的标点信息发布到帖子上的旅游类app。

github 代码地址,希望对你有所帮助~

大二 Web 课程大作业——小程序标点地图

小程序的主要功能就是记录地图上的标点信息,并上传到云数据库中;

大二 Web 课程大作业——小程序标点地图

以及编辑文章,把文章信息上传到云数据库中;

大二 Web 课程大作业——小程序标点地图

获取云数据库中的文章(最新发布的3篇)。

大二 Web 课程大作业——小程序标点地图

数据库设计

大二 Web 课程大作业——小程序标点地图

目前有两个数据库表。databasemarkers 存储本次记录中所有标点信息;databasearticles 存储该文章发布时间、文章标题、备注、内容以及对应的标点记录id(外键)。

1. 地图标点

小程序自带的 map 组件中有一个属性 markers,是一个对象数组。只要把相应格式的对象数组传给 map 组件,就会自动在地图上标记出点的信息。

大二 Web 课程大作业——小程序标点地图

wxml 文件:

<!-- subkey 用于调整地图样式 经纬度 latitude longitude 信息是地图初始的中心点。 本例中,要传递给 map 组件的对象数组也命名为 markers,在 js 文件中获取数据后传递给 map-->
<map id="map" subkey="DKEBZ-LKBW4-B3KUP-DYSCI-IG7OS-SQBJH" longitude='{
    {weidu}}' latitude='{
    {jingdu}}' scale="10" layer-style="1" show-location="true" markers="{
    {markers}}"></map>

<!--每次点击添加标点按钮,就会获取当前位置信息,存入 markers 数组-->
<button size="default" bindtap="recstart">
    添加标点
</button>

<!--点击结束记录,将标点信息上传到数据库 databasemarkers 中,并跳转到文章编辑页面-->
<button size="default" bindtap="recstop">
    添加标点
</button>

js 文件:

let cnt=cnt+1
const db=wx.cloud.database
Page({
   
    data: {
   
        jingdu: "",
        weidu: "",
        markers: [],
    },
	recstart: function () {
   
        var that = this
        cnt = cnt + 1
        wx.getLocation({
   
            altitude: 'altitude',
            highAccuracyExpireTime: 0,
            isHighAccuracy: true,
            type: 'gcj02',
            success: (result) => {
   
                console.log(result)
                let marker = this.data.markers
                marker.push({
   
                    id: cnt-1,
                    latitude: result.latitude,
                    longitude: result.longitude,
                    width: 20,
                    height: 30
                })
                // let pointobj = this.data.polyline[0].points
                // console.log(pointobj)
                // pointobj.push(
                // {
   
                // latitude: result.latitude,
                // longitude: result.longitude,
                // }
                // )
                console.log(that.data.markers)
                that.setData({
   
                    jingdu: result.latitude,
                    weidu: result.longitude,
                    recmode: 1,
                    markers: marker,
                    // polyline:[{
   
                    // points:pointobj
                    // }]
                })
            },
            // fail: (res) => {},
            // complete: (res) => {},
        })
    },
    recstop:function() {
   
      var that = this
      db.collection("databasemarkers").add({
   
        data:{
   
          markers:this.data.markers
        }
      }).then(res=>{
   
        console.log("数据添加成功!")
        console.log(res)
        var docstring=res._id
        wx.navigateTo({
   
        url: '/pages/addarticle/addarticle?docstring='+docstring
      })
      })
      
    },
    /** * 生命周期函数--监听页面加载 */
    onLoad(options) {
   
        var that = this
        wx.getLocation({
   
            altitude: 'altitude',
            highAccuracyExpireTime: 0,
            isHighAccuracy: true,
            type: 'type',
            success: (result) => {
   
                console.log(result)
                this.setData({
   
                    jingdu: result.latitude,
                    weidu: result.longitude
                })
            }
            // fail: (res) => {},
            // complete: (res) => {},
        })
    },
})

2. 发布文章

大二 Web 课程大作业——小程序标点地图

添加完标点信息后,提示输入文章标题、备注、正文信息,点击提交,文章就会发布到 databasearticles 数据库中。

wxml:

<view class="inputbox">
  <view class="line" style="border-top: 1px solid #e4e4e4;">
    <label>题目</label>
    <input placeholder=" 请输入题目" bindinput="inputtitle"/>
  </view>
  <view class="line">
    <label>备注</label>
    <input placeholder=" 请输入备注信息" bindinput="inputcomment" />
  </view>
  <view class="line-content">
    <label>正文</label>
    <input placeholder=" 请输入正文" class="content" bindinput="inputcontent" />
  </view>
</view>
<button bindtap="submit" class="submit">提交</button>

js:

const db=wx.cloud.database() Page({
   

  /** * 页面的初始数据 */
  data: {
   
    dataobj:{
   
      comment:"",
      content:"",
      title:"",
      markersid:""
    }
  }, inputtitle:function(options){
   
    var value=options.detail.value console.log(value) this.setData({
   
      title:value
    })
  }, inputcomment:function(options){
   
    var value=options.detail.value console.log(value) this.setData({
   
      comment:value
    })
  }, inputcontent:function(options){
   
    var value=options.detail.value console.log(value) this.setData({
   
      content:value
    })
  }, submit(){
   
    var mydate=new Date() db.collection("databasearticles").add({
   
      data:{
   
        content:this.data.content,
        markersid:this.data.markersid,
        comment:this.data.comment,
        title:this.data.title,
        createdate:mydate
      }
    }).then(res=>{
   
      console.log("数据添加成功!") console.log(res) wx.navigateTo({
   
          url: '/pages/success/success',
        })
    })
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad(options) {
   
    var docstring=options.docstring console.log(docstring) this.setData({
   
      markersid:docstring
    })
  },
})

wxss:

.inputbox {
   
  margin-top:60rpx;
  height: 450rpx;
}

.inputbox .line {
   
  display: block;
  min-height:100rpx;
  line-height:100rpx;
  padding: 0 30rpx;
  border-bottom:1px solid #e4e4e4;
}

.inputbox .line-content {
   
  display: block;
  min-height:300rpx;
  line-height:160rpx;
  padding: 0 30rpx;
  border-bottom:1px solid #e4e4e4;
}

.inputbox .line label {
   
  float: left;
}

.inputbox .line-content label {
   
  float:left;
}

.inputbox .line input {
   
  height:100rpx;
  line-height:100rpx;
  float: left;
  margin-left:40rpx;
}

.inputbox .line-content input {
   
  width:80%;
  height:140rpx;
  line-height: 140rpx;
  float: left;
  margin-left:40rpx;
}

.submit {
   
  position: absolute;
	width: 80%;
	left: 0;
	right: 0;
	margin: 180rpx auto 0;
  border-radius: 98rpx;
  border: 3rpx solid rgb(0, 0, 167);
  color:rgb(0, 0, 167);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

3. 获取最新发布的三篇文章

大二 Web 课程大作业——小程序标点地图

最新发布模块可以获取云数据库中最新发布的三篇文章,原理是根据时间戳倒叙排序后取前三条记录。

db.collection("databasearticles")
      .orderBy('createdate','desc')
      .limit(3)
      .get({
   
        success:res=>{
   
          console.log(res)
          this.setData({
   
            new3obj:res.data//new3obj 是在 data 中定义的,用来接收最新发布的三篇文章对象集合的变量
          })
        }
      })

以上就是本小程序核心功能啦!希望对你有帮助!

w3cjava

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: