微信小程序可以通过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%;
}
小程序工具提供多类型商城/门店小程序制作,,,可视化编辑 1秒天生5步上线。。。。通过拖拽、拼接???榻峁剐〕绦蛏坛且趁妫,所看即所得,,,只需要美工就能做出细腻商城。。。。更多小程序市肆请审查:小程序市肆
KESION 金狮贵宾会软件
KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。KESION 一直通过手艺立异,,,提供产品和服务,,,助力企业向数字化转型,,,通过科技驱动商业刷新,,,让商业变得更智慧!
小程序验证码倒计时是小程序倒计时功效很常见的一种,,,输入手机号期待验证码的倒计时,,,那么这种形式要怎么获取呢???...
微信小程序中怎样翻开另一个小程序 ,,,点击一个小程序跳转到对应的小程序,,,然后点击可以返回上一个小程序。。。。以下为实现流程...