微信小程序获取位置展示地图并标注信息的实例代码

时间:2021-05-18

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": "你的位置信息将用于获取周边服务" } }}

总结

以上所述是小编给大家介绍的微信小程序获取位置展示地图并标注信息的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章