在app.json中进行声明
"requiredPrivateInfos": [
"getLocation"
]
<view class="main">
<navigation-bar default-data="{{defaultData}}"></navigation-bar>
<view class="mainBody">
<!-- 在wxml文件中使用map组件 -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" show-location style="width: 100%; height: 89vh;"></map>
</view>
</view>
var ports = require("../../../utils/ports.js")
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
defaultData: {
title: "校园地图", // 导航栏标题
arrow: true, //是否显示返回箭头
},
query: {},
latitude: '', // 地图中心点纬度
longitude: '', // 地图中心点经度
scale: 14, // 缩放级别,取值范围为3-20
markers: [], // 标记点
polyline: [], // 路线数据,通常是一个包含多个坐标点的数组
endLat:app.endLat,// 终点纬度
endLng:app.endLng,// 终点经度
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
// ... 其他代码,包括获取位置、规划路线等
// 当获取到路线数据后,更新polyline数据以在地图上展示路线
updateRouteOnMap(routeData) {
// 将routeData转换为地图组件可以识别的polyline格式
const polyline = []; // 转换后的路线数据
this.setData({
polyline: polyline
});
},
// ... 其他函数和逻辑
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.getUserLocation()
},
// 获取用户当前坐标
getUserLocation() {
const that=this
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
const latitude = res.latitude; // 纬度,浮点数,范围为-90~90,负数表示南纬
const longitude = res.longitude; // 经度,浮点数,范围为-180~180,负数表示西经
console.log('经度',longitude);
console.log('纬度',latitude);
that.setData({
longitude:longitude,
latitude:latitude,
})
that.planningRoute()
// 这里可以调用规划路线的函数,将当前位置作为起点
},
fail: function (err) {
console.error(err);
}
});
},
// 规划路线
planningRoute() {
// 假设你已经有了起点和终点的坐标
const startLat = this.data.latitude; // 起点纬度
const startLng = this.data.longitude; // 起点经度
const endLat = this.data.endLat; // 终点纬度
const endLng = this.data.endLng; // 终点经度
const that=this
// 注意,你需要再微信公众号后台,配置request合法域名,把https://apis.map.qq.com添加到你的request合法域名中。(微信公众平台—设置—开发设置—服务器域名)。
// 构建请求URL(这里只是一个示例,你需要查看腾讯地图API文档来获取正确的URL和参数)
const url = `https://apis.map.qq.com/ws/direction/v1/driving?origin=${startLat},${startLng}&destination=${endLat},${endLng}&key=${app.TXKey}`;
wx.request({
url: url,
method: 'GET',
success: function (res) {
// 解析返回的路线数据,准备在地图上展示
const routeData = res.data; // 这里是假设的数据结构,具体取决于API返回的内容
console.log('路线数据',routeData);
// if(routeData.status==200){
// that.setData({
// polyline:routeData.
// })
// }
// 将路线数据传递给地图组件或相关函数进行展示
},
fail: function (err) {
console.error(err);
}
});
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})