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

前言

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

地图全屏显示

1. 地图横版显示
   在map_page.wxml 中写入：
   <view>
<map id="map" longitude='113.324520' latitude='23.099994' scale="14" style="height: 100%;width: {{width}}px;"></map>
</view>

2. 地图竖版（全屏）显示
   在map_page.wxml 中写入：
   <view>
<map id="map" longitude='113.324520' latitude='23.099994' scale="14" markers='{{markers}}' bindmarkertap="markertap" bindregi"regionchange" show-location style="width: 100%;height: {{height}}px;" show-compass="false"></map>
</view>
   在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}} 了。

譬如，
<text>{{longitude}}</text>

或者直接传到map中，反馈到之前的地图上，
<view>
<map id="map" longitude='{{longitude}}' latitude='{{latitude}}' scale="14" markers='{{markers}}' bindmarkertap="markertap" bindregi"regionchange" show-location style="width: 100%;height: {{height}}px;" show-compass="false"></map>
</view>

结果展示