效果图
组件
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 750rpx; height: 700rpx;position:absolute">
</map>
js代码
// pages/map/driverServer/driverServer.js
Page({
/**
* 页面的初始数据
*/
data: {
markers: [{
iconPath: "../../../images/icon/icon-20.png",
id: 0,
latitude: 32.27,
longitude: 108.93,
width: 20,
height: 20
}],//用户当前位置图标
polyline: [{
points: [{
latitude: 34.780254,
longitude: 113.699559
}, {
longitude: 113.701855,
latitude: 34.779778
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '../../../images/icon/icon-22.png',
position: {
left: 10,
top: 33,
width: 50,
height: 50
},
clickable: true
}, {
id: 2,
iconPath: '../../../images/icon/icon-30.png',
position: {
top: 288,
left: 10,
width: 50,
height: 50
},
clickable: true
}
],//人物图片定位
drivers:[
{id:"001",title:"1名司机"},
{ id: "002", title: "2名司机" },
{ id: "003", title: "3名司机" },
{ id: "004", title: "4名司机" },
{ id: "005", title: "5名司机" },
{ id: "006", title: "6名司机" },
{ id: "007", title: "7名司机" },
{ id: "008", title: "8名司机" }
],//司机数量
startAddress:"所在位置（自动生成）",//开始位置
endAddress:null,//结束位置
orderOrMore:true,//预约和司机数量显示
driverCount:-1,
longitude:null,
latitude:null,
pageRight:0,
myShow:true,//显示my的页面
zuoyou: "icon-zuoyou",//my
avatar: "../../../images/icon/icon-07.png",
buttonText: "登录",
username: "未登录",
orderGoing:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 调用用户的地理位置
this.getlocation();
},
regionchange(e) {
console.log("regionchange", e.type)
},
markertap(e) {
console.log("markertap", e.markerId)
},
controltap(e) {
console.log("map controltap", e.controlId)
if (e.controlId===1){
this.openMyPageHandler();
}else{
const address=wx.getStorageSync("startAddress");
this.setData({
longitude: address.longitude,
latitude: address.latitude})
}
},
// openMyPageHandler 打开我的页面
openMyPageHandler:function(){
const { pageRight, myShow}=this.data;
console.log("openMyPageHandler",pageRight, myShow);
if (myShow){
this.setData({ pageRight: 620, myShow: !myShow });
}else{
this.setData({ pageRight: 0, myShow: !myShow });
}
},
// 获取用户的地理位置
getlocation: function () {
const that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
console.log("latitude:" + latitude)
console.log("longitude:" + longitude)
console.log("speed:" + speed)
console.log("accuracy:" + accuracy)
that.setData({ latitude, longitude });
// wx.setStorageSync("latitude_longitude", { latitude, longitude})
console.log("定位成功");
var locationString = res.latitude + "," + res.longitude; //获取的经度纬度
wx.request({
url: 'http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1', //根据经纬度转换成具体地址
data: {
"key": "YLFBZ-WHAWI-ZXUGH-53Q65-TOJ7E-ADBNQ",
"location": locationString
},
method: 'GET',
// header: {},
success: function (res) {
// success
console.log("请求成功");
console.log("请求数据:" + res.data.result.address);
console.log("startAddress",wx.getStorageSync("startAddress"));
if (wx.getStorageSync("startAddress") !== "") {
that.setData({ startAddress: wx.getStorageSync("startAddress").addressName });
}else{
that.setData({ startAddress: res.data.result.address });
wx.setStorageSync("startAddress", { addressName: res.data.result.address, addressText: res.data.result.address, latitude, longitude});
}
},
fail: function () {
// fail
console.log("请求失败");
},
complete: function () {
// complete
console.log("请求完成");
}
})
}
})
},
// callPhoneHandler 帮朋友叫车功能
callPhoneHandler:function(){
wx.navigateTo({ url:"../../order/helpFriendDownloadOrder/helpFriendDownloadOrder"})
},
// getMoreDriverHandler 需要更多为司机功能
getMoreDriverHandler:function(){
this.setData({ orderOrMore: !this.data.orderOrMore});
},
// bindChange 选择司机的数量
bindChange:function(e){
console.log(e.detail.value[0]);
this.setData({ driverCount: e.detail.value[0]+1});
},
// getDriverCountHandler 获取司机的数量
getDriverCountHandler:function(){
this.setData({ orderOrMore: !this.data.orderOrMore });
},
// intoSearchPageHandlerStart 输入开始地址
intoSearchPageHandlerStart:function(){
wx.navigateTo({
url: '../searchAddress/searchAddress?addressType=startAddress',
})
},
// intoSearchPageHandler 输入目的地
intoSearchPageHandlerEnd:function(){
wx.navigateTo({
url: '../searchAddress/searchAddress?addressType=endAddress',
})
},
// callServerHandler 一键呼叫事件
callServerHandler:function(){
if (this.data.endAddress===null){
wx.showToast({
title: '请输入目的地',
})
}else{
const order=wx.getStorageSync("order");
const current_order = {
id: "00"+(order.length+1),
time: new Date(),
startAddress: this.data.startAddress,
endAddress: this.data.endAddress,
status: 0,
driver_count: this.data.driverCount === -1 ? 1 : this.data.driverCount,
user: wx.getStorageSync("relative_people") === "" ? wx.getStorageSync("user") : wx.getStorageSync("relative_people"),
};
wx.setStorageSync("current_order", current_order)
wx.removeStorageSync("endAddress");
wx.removeStorageSync("relative_people");
wx.navigateTo({
url: '../orderAndDriverGoing/orderAndDriverGoing',
})
}
},
// orderGoingHandler 订单进行中事件
orderGoingHandler:function(){
wx.showToast({
title: '您还没有进行中的订单',
icon: "none"
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if(wx.getStorageSync("endAddress")!==""){
this.setData({ endAddress: wx.getStorageSync("endAddress").addressName });
}
if (wx.getStorageSync("startAddress") !== ""){
this.setData({ startAddress: wx.getStorageSync("startAddress").addressName });
}else{
this.setData({ startAddress: wx.getStorageSync("startAddress").addressName });
}
},
// 用户信息事件
/**loginHandler用户登录页面 */
loginHandler: function (e) {
// this.getOpenIdHandler();
// app.loginHandler();
const openId=wx.getStorageSync("openId");
if (openId && this.data.buttonText === "登录") {
const that = this;
wx.login({
success: res => {
console.log(res);
if (res.code) {
wx.getUserInfo({
success: res => {
console.log(res);
that.setData({ avatar: res.userInfo.avatarUrl, username: res.userInfo.nickName, buttonText: "退出" });
}
})
}
}
})
} else {
this.setData({ avatar: "../../../images/icon/icon-07.png", username: "未登录", buttonText: "登录" });
}
},
// intoPageHandler 页面跳转
intoPageHandler: function (e) {
console.log(e.currentTarget.dataset.skip);
wx.navigateTo({
url: e.currentTarget.dataset.skip,
})
},
// callPhoneHandler 联系客服
callPhoneHandler: function () {
wx.makePhoneCall({
phoneNumber: wx.getStorageSync("serverPhone"),
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
希望我的总结能够帮助更多初学这，这是一个前端菜鸟的总结笔记。。。