专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
微信小程序可以通过API获取当前位置的经纬度,那么如果根据经纬度规划路线怎么做。
效果图:
1、wxml文件
<view class="mapHeight"> <map id="map" class="map" polyline="{{polyline}}" markers="{{markers}}" include-points="{{markers}}" ></map> </view>
2、 js文件
var coors; Page({ data: { polyline: [], markers: [], }, onReady: function() { this.mapContext = wx.createMapContext("map", this); }, onLoad: function(options) { // 获取当前地图,设置经纬度,传递过来的坐标,用户下单的坐标地址。 console.log(options); wx.getLocation({ success: (res) => { this.setData({ latitude: options.latitude, longitude: options.longitude }); this.getCenterLocation(res); wx.request({ url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF', success: (res) => { coors = res.data.result.routes[0].polyline for (var i = 2; i < coors.length; i++) { coors[i] = coors[i - 2] + coors[i] / 1000000 } console.log(coors) //划线 var b = []; for (var i = 0; i < coors.length; i = i + 2) { b[i / 2] = { latitude: coors[i], longitude: coors[i + 1] }; console.log(b[i / 2]) } this.setData({ polyline: [{ points: b, color: "#00ae20", width: 4, dottedLine: false }], }) } }) } }); }, // 两个坐标 一个下单地址,一个工程师接单地址,然后不停的更新工程师的坐标位置。 getCenterLocation: function(res) { this.setData({ markers: [{ iconPath: "/resources/center.png", id: 0, latitude: res.latitude, longitude: res.longitude, width: 30, height: 30, alpha: 0.8, callout: { content: " 我的位置 ", color: "#ffffff", fontSize: 10, borderRadius: 10, bgColor: "#6e707c", padding: 5, display: "ALWAYS" } }, { iconPath: "/resources/user.png", id: 1, latitude: res.latitude + 0.1, longitude: res.longitude + 0.1, width: 30, height: 30, alpha: 0.8, callout: { content: " 工程师 ", color: "#ffffff", fontSize: 10, borderRadius: 10, bgColor: "#6e707c", padding: 5, display: "ALWAYS" } } ], }); }, });
3、wxss文件
.mapHeight { display: flex; flex-direction: column; } .map { flex: 1; height: 100vh; width: 100%; }
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...
星巴克的线上线下营销策略 星巴克作为全球知名的咖啡连锁品牌,一直在线上线下营销领域走在前列。以下是星巴克如何通...
在数字化时代,线上线下相结合的营销模式已成为零售行业的新常态,它通过整合线上电商平台和线下实体店铺的资源,为消...