1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式
2.获取位置要在app.json
中标明权限
3.先使用wx.getLocation
获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点
index.js
//index.js //获取应用实例 const app = getApp() Page({ data: { }, onLoad: function () { var self=this; this.mapCtx = wx.createMapContext('myMap'); wx.getLocation({ type: 'gcj02', success(res) { self.setData({ latitude : res.latitude, longitude : res.longitude, markers: [{ id: 1, latitude: res.latitude, longitude: res.longitude, iconPath: '/image/location.png', callout:{ content:"服务:青少年英语培训\r\n姓名:陶士涵\r\n电话:18808987876", bgColor:"#fff", padding:"5px", borderRadius:"2px", borderWidth:"1px", borderColor:"#07c160", } }, { id: 2, latitude: res.latitude, longitude: res.longitude+0.01, iconPath: '/image/location.png', callout: { content: "服务:出租龙兴园西区9号楼二单元501\r\n姓名:陶士涵\r\n电话:18808987876", bgColor: "#fff", padding: "5px", borderRadius: "2px", borderWidth: "1px", borderColor: "#07c160", } } ], }); } }) }, })
index.wxml
<!--index.wxml--> <map id="myMap" style="width: 100%; height:100vh;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}" show-location ></map>
app.json
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "找服务", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "permission": { "scope.userLocation": { "desc": "你的位置信息将用于获取周边服务" } } }
总结
以上所述是小编给大家介绍的微信小程序获取位置展示地图并标注信息的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]