在微信小程序中如何获取用户当前的地理位置以及在页面上如何给在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 () {
}
})
希望我的总结能够帮助更多初学这，这是一个前端菜鸟的总结笔记。。。