• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

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

结果展示


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 获取unionid解决方案发布时间:2022-07-18
下一篇:
BusyBox添加自定义命令\小程序(applet)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap