效果图：1、wxml文件view class= quot;mapHeight quot; map id= quot;map quot; class= quot;map quot; polyline= quot;{{polyline}} quot; markers= quot;{{markers}} quot; include-points= quot;{{markers}} quot; /map /view2、 js文件var coors; Page({ data: { polyline: , 。
宁波小程序开发对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。。
效果图：
1、wxml文件
lt;view gt; lt;mapid="map"polyline="{{polyline}}"markers="{{markers}}"include-points="{{markers}}" gt; lt;/map gt; lt;/view gt;
2、 js文件
var coors;Page({data: {polyline: [],markers: [],},onReady: function() {this。宁波微信小程序开发其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 mapContext = wx。createMapContext("map", this);},onLoad: function(options) {// 获取(obtain)当前地图，设置经纬度，传递（transmission)过来的坐标，用户下单的坐标。console。log(options);wx。getLocation({success: (res) = gt; {this。setData({latitude: options。latitude,longitude: options。longitude});this。getCenterLocation(res);wx。request({url: 'httPHOTOSHOP://apis。map。qq。com/ws/direction/v1/driving/from=' + this。data。markers[0]。latitude + ',' + this。data。markers[0]。longitude + ' amp;to=' + this。data。markers[1]。latitude + ',' + this。data。markers[1]。longitude + ' amp;OUT(出局）put=json amp;callback=cb amp;key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',success: (res) = gt; {coors = res。data。result。routes[0]。polylinefor (var i = 2; i lt; coors。length; i++) {coors[i] = coors[i - 2] + coors[i] / 1000000}console。log(coors)//划线var b = [];for (var i = 0; i lt; 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}],})}})}});},// 两个坐标 一个下单，一个工程师接单，然后不停的更新工程师的坐标位置（position )。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文件。宁波小程序开发对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。mapHeight {display: flex;flex-direction: column;}。map {flex: 1;height: 100vh;width: 100%;}
