[小程序]微信小程序获取位置展示地图并标注信息
2023-02-18 15:41:34 时间
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": "你的位置信息将用于获取周边服务" } } }
相关文章
- 【Android】使用Android开发应用过程中遇到ViewGroup的简单效以及aw和assets文件夹下的文件(Http协议的底层工作)
- 你了解吗?小程序要怎么在硬件设备上运行
- Aiseesoft iPhone Cleaner for Mac(ios清理软件)中文版v1.0.18
- 为什么最近每份 Android 简历都说 “熟悉 MQTT 协议”?
- Android 序列化框架 Gson 原理分析,可以优化吗?
- iOS呼吸动画
- iOS 悬浮可拖动可点击按钮
- Android Automotive Framework调试技巧
- Android 开场动画
- Android 主题theme说明 摘记
- Android开发 去掉标题栏方法 摘记
- Jitpack发布Android库出现Direct local .aar file dependencies are not supported when building an AAR
- 关于Android12安装apk出现-108异常INSTALL_PARSE_FAILED_MANIFEST_MALFORMED的解决方法
- Android 多module情况下module依赖aar问题处理
- Android7.0以上的分享图片文件错误及解决方法
- Android开发 对接微信分享SDK总结
- Android RecyclerView使用ListAdapter高效刷新数据
- Android自动化测试工具调研
- Android 自动取色并设置沉浸式状态栏
- Java 断点下载(下载续传)服务端及客户端(Android)代码