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

时间:2024-03-18 20:12:34

前言

本文中描述某一页面的文档用 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
    })
    },
    })
    },

获得用户当前的位置

这里得到的位置,指的是用户当前的latitudelongitude
这里使用的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>

结果展示

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