在微信小程式中如何獲取使用者當前的地理位置以及在頁面上如何給在map元件上的圖示繫結事件
效果圖
元件
<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 () {
}
})
希望我的總結能夠幫助更多初學這，這是一個前端菜鳥的總結筆記。。。