[小程序]微信小程序获取位置展示地图并标注信息
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": "你的位置信息将用于获取周边服务" } } }
十年开发经验程序员,离职全心创业中,历时三年开发出的产品《唯一客服系统》
一款基于Golang+Vue开发的在线客服系统,软件著作权编号:2021SR1462600。一套可私有化部署的网站在线客服系统,编译后的二进制文件可直接使用无需搭开发环境,下载zip解压即可,仅依赖MySQL数据库,是一个开箱即用的全渠道在线客服系统,致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址:唯一客服(开源学习版)
官网地址:唯一客服官网
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 开箱你的 AI 语音女友「GitHub 热点速览」
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(二):用.NET IoT库
· 几个自学项目的通病,别因为它们浪费了时间!
· C#钩子(Hook) 捕获键盘鼠标所有事件 - 5分钟没有操作,自动关闭 Form 窗体
· 特斯拉CEO埃隆.马斯克的五步工作法,怎么提高工程效率加速产品开发?
2018-08-31 [PHP]算法-归并排序的PHP实现