本文的学习内容来自小牛课堂,微信小程序的学习地址:https://www.nowcoder.com/study/vod/204/2/2
微信小程序开发官方帮助文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html
注:为了书写的方便快捷,每个功能点只记录了它的关键之处,并不完整
- 从Sensor里面读取经纬度,显示对应的地理位置信息
//index.wxml
//相关属性:latitude(纬度),longitude(经度)
<map id='mymap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%'
>
</map>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
lat:0,
log:0
},
//首次加载页面时调用
onLoad: function () {
var that = this;
//获取当前位置的地理信息
wx.getLocation({
success: function(res) {
var longitude = res.longitude;
var latitude = res.latitude;
that.setData({
log : longitude,
lat: latitude
})
}
})
}
})
2.在地图内添加控件
//index.wxml
//相关属性:controls
<map id='mymap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%'
controls='{{controls}}'
>
</map>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
log:0,
lat:0,
controls: []
},
//首次加载页面时调用
onLoad: function () {
var that = this;
//获得系统信息
wx.getSystemInfo({
success: function(res) {
var windowWidth = res.windowWidth;
var windowHeight = res.windowHeight;
console.log(windowWidth)
that.setData({
controls: [
//扫码按钮
{
id: 1,
iconPath: '/images/qrcode.png',
position: {
width: 100,
height: 60,
left: windowWidth / 2 - 50,
top: windowHeight - 90
},
clickable: true
}
]
})
}
})
}
})
3.点击回到地图原来的位置
//属性:bindcontroltap='controltap'
//index.wxml
<map id='myMap' latitude='{{lat}}' longitude='{{log}}' style='width:100%;height:100%' show-location='true' scale='17'
bindcontroltap='controltap'
controls='{{controls}}'
>
</map>
//index.js
controltap: function(e) {
var cid = e.controlId;
switch(cid) {
case 7: {
//回到原来的位置,mapCtx记录了地图移动前的初始位置
this.mapCtx.moveToLocation();
}
}
},
//页面渲染完成就会执行
onReady: function() {
//创建map上下文
this.mapCtx = wx.createMapContext('myMap')
}
wx.createMapContext用法:https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html#wxcreatemapcontextmapid