微信小程序实现“地图全屏显示”以及“获得用户当前位置”

前言

本文中描述某一页面的文档用 page.js/json/wxml/wxss 表示。

地图全屏显示

1. 地图横版显示
   在map_page.wxml 中写入：
   
   
   

2. 地图竖版（全屏）显示
   在map_page.wxml 中写入：
   
   
   
   在page.js 中写入：
   onLoad: function(options) {
var that = this
wx.getSystemInfo({
success: function(res) {
that.setData({
height: res.windowHeight
})
},
})
},

获得用户当前的位置

这里得到的位置，指的是用户当前的latitude 和 longitude 。
这里使用的API是wx.getLocation()
在page.js 中写入：
onLoad: function(options) {
let that = this
wx.getLocation({
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
that.setData({
latitude:res.latitude,
longitude:res.longitude
})
},
})
},

这之后即可以在page.wxml 文件中直接使用 {{longitude}} 和 {{latitude}} 了。

譬如，
{{longitude}}

或者直接传到map中，反馈到之前的地图上，

结果展示