[小程序]微信小程序获取位置展示地图并标注信息
程序员文章站
2022-06-24 08:23:21
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点 index.js index.wxml app.json ......
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": "你的位置信息将用于获取周边服务" } } }
上一篇: Python基于Tkinter开发一个爬取B站直播弹幕的工具
下一篇: 10-浮动