微信小程序开发之——婚礼邀请函-婚礼地点页面(4.6)

一 概述

  • "婚礼地点"页面任务说明
  • map组件介绍
  • “婚礼地点”页面功能开发
  • 效果图

二 "婚礼地点"页面任务说明

  • 该页面会显示婚礼地点的地图
  • 单击导航图标可以定位酒店位置,查看路线
  • 拾取到婚礼举办酒店的经纬度坐标
  • 利用map组件显示地图,并在婚礼地点放置markers覆盖物标记
  • 单击图标标记点,通过wx.openLocation()调用微信内置地图查看位置

三 map组件介绍

3.1 map组件属性

属性 类型 说明
longitude Number 经度
latitude Number 纬度
scale Number 缩放级别,取值范围是5~18,默认为16
markers Array 标记点
polyline Array 路线
circles Array
show-location Boolean 显示带有方向的当前定位点
bindmarkertap EventHandle 单击标记点时触发,会返回marker的id
bindregionchange EventHandle 视野发生变化时触发
bindtap EventHandle 单击地图时触发
bindupdated EventHandle 在地图渲染更新完成时触发

markers标记点属性

属性 类型 必填 说明
id Number 标记点id,marker单击事件回调会返回此id
longitude Number 经度,浮点数,范围-180~180

polyline坐标点属性

属性 类型 必填 说明
latitude Number 经度,浮点数,范围-90~90
title String 标注点名
zIndex Number 显示层级
iconPath String 显示的图标,使用项目目录下的图片路径
rotate Number 顺时针旋转的角度,范围0~360,默认为0
alpha Number 透明度,范围0~1,默认为1(不透明)
width Number 图片宽度,默认为图片实际宽度
height Number 图片宽度,默认为图片实际高度

circles圆属性

属性 类型 必填 说明
points Array 经纬度数组,如{latitude:0,longitude:0}
color String 线的颜色,8位十六进制表示,后两位表示alpha值,如#000000AA
width Number 线的宽度
dottedLine Boolean 是否虚线,默认为false
latitude Number 经度,浮点数,范围-90~90
longitude Number 经度,浮点数,范围-180~180
color String 描边的颜色,8位十六进制表示,后两位表示alpha值,如#000000AA
fillColor String 填充颜色,8位十六进制表示,后两位表示alpha值,如#000000AA
radius Number 半径
strokeWidth Number 描边的宽度

3.2 坐标拾取器

打开腾讯位置服务网站提供的位置拾取器https://lbs.qq.com/tool/getpoint/,输入查找地点,获取查找点坐标

3.3 map组件使用

1
<map latitude="39.906930" longitude="116.397570" scale="18"></map>

四 “婚礼地点”页面功能开发

4.1 界面布局(pages/map/map.wxml)

1
2
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" bindmarkertap="markertap">
</map>

4.2 样式文件(pages/map/map.wxss)

1
2
3
map{
width: 100vw;height: 100vh;
}

4.3 功能逻辑文件(pages/map/map.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Page({

/**
* 页面的初始数据
*/
data: {
latitude:39.908583,longitude:116.397186,
markers:[{
iconPath:'../../images/nav.png',id:0,
latitude:39.908583,longitude:116.397186,width:50,height:50
}]
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

},
buttonTap:function(){
wx.getLocation({
type:'gcj02',
success:function(res){
wx.openLocation({
latitude: res.latitude,
longitude: res.longitude,
})
}
})
},
markertap:function(){
wx.openLocation({
latitude: this.data.latitude,
longitude: this.data.longitude,
name:'XX大酒店',address:'北京市 海淀区 XX路'
})
}
})

五 效果图