注册账号(https://lbs.amap.com/)) 申请小程序应用的 key
应用管理(https://console.amap.com/dev/key/app)) -> 我的应用 -> 创建新应用
生成的 key 即可用在程序中
1.在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js 从相关下载页面下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,如下图所示。
2.设置小程序安全通讯域名,为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。
登录微信公众平台,在 “设置”->“开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示",
"dowload": "您的文件访问权限用于打开文件"
}
},
var amapFile = require('../../../libs/amap-wx.130'); //如:../../libs/amap-wx.js
import {
baipaoGps
} from "../../../utils/api/car.js";
var amapFile = require('../../../libs/amap-wx.130'); //如:../../libs/amap-wx.js
Page({
data: {
longitude: 117.3590007750093, //经度
latitude: 22.846911841310202, //维度
scale: 17, //地图默认缩放等级
showModal: false, //弹框显隐
modalData: {}, //详情信息
G: {
pi: 3.141592653589793,
a: 6378245,
ee: .006693421622965943,
x_pi: 52.35987755982988
},
licence:'',//车牌号
markers:[],//点位数据
},
onLoad: function (options) {
if (options) {
this.setData({
licence:options.licence
})
//初始化地图
this.mapCtx = wx.createMapContext('map');
this.baipaoGps(options).then((res) => {
if (res) {
//加载点位数据
this.loadMarkers();
}
})
}else{
wx.showToast({
title: '车牌号为空',
icon: 'none'
})
}
},
/**
* 请求数据
*/
baipaoGps(options){
return new Promise((resolve, reject) => {
console.log(options)
baipaoGps(options).then(res => {
if (res.data.success) {
this.data.markers.push(res.data.result)
resolve(res.data.result)
} else {
wx.showToast({
title: res.data.message,
icon: 'none'
})
}
})
})
},
loadMarkers: function () {
//生成 markers 列表,用于在地图上展示
let markersData = this.data.markers.map(marker => {
// console.log(marker)
var a = this.transfor2Mars( Number(marker.baipaoGpsInfoBean.gps.lat), Number(marker.baipaoGpsInfoBean.gps.lng));
return {
id: Number(marker.extra.id),
longitude: a.Lng,
latitude: a.Lat,
vehNum: marker.extra.licenseName,
location:marker.baipaoGpsInfoBean.location,
iconPath: '../../../static/img/marker.png',
width: 40,
height: 40,
};
});
this.setData({
markers: markersData,
longitude:markersData[0].longitude,
latitude:markersData[0].latitude
});
},
// 点击标记点时触发
markertap(e) {
//点击 marker 时触发,获取对应的点位信息并展示弹框
// console.log(e.detail)
let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
this.setData({
showModal: true,
modalData: markerData
});
},
// 关闭弹框
onClose() {
this.setData({
showModal: false
});
},
navigateToMap() {
const modalData = this.data.modalData;
const { longitude, latitude } = modalData;
// 调用小程序API打开高德地图并进行导航
wx.openLocation({
longitude,
latitude,
name: modalData.location, // 标记点名称,可根据实际情况设置
scale: 18, // 地图缩放级别,可根据实际情况设置
});
},
isOutOfChina(e, a) {
return a < 72.004 || a > 137.8347 || (e < .8293 || e > 55.8271)
},
transforLat(e, a) {
var t = 2 * e - 100 + 3 * a + .2 * a * a + .1 * e * a + .2 * Math.sqrt(Math.abs(e));
return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,
t += 2 * (20 * Math.sin(a * this.data.G.pi) + 40 * Math.sin(a / 3 * this.data.G.pi)) / 3,
t += 2 * (160 * Math.sin(a / 12 * this.data.G.pi) + 320 * Math.sin(a * this.data.G.pi / 30)) / 3
},
transforLng(e, a) {
var t = 300 + e + 2 * a + .1 * e * e + .1 * e * a + .1 * Math.sqrt(Math.abs(e));
return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,
t += 2 * (20 * Math.sin(e * this.data.G.pi) + 40 * Math.sin(e / 3 * this.data.G.pi)) / 3,
t += 2 * (150 * Math.sin(e / 12 * this.data.G.pi) + 300 * Math.sin(e / 30 * this.data.G.pi)) / 3
},
transfor2Mars(e, a) {
if (this.isOutOfChina(e, a))
return {
Lat: e,
Lng: a
};
var t = this.transforLat(a - 105, e - 35),
r = this.transforLng(a - 105, e - 35),
n = e / 180 * this.data.G.pi,
o = Math.sin(n);
o = 1 - this.data.G.ee * o * o;
var s = Math.sqrt(o);
return {
Lat: e + (t = 180 * t / (this.data.G.a * (1 - this.data.G.ee) / (o * s) * this.data.G.pi)),
Lng: a + (r = 180 * r / (this.data.G.a / s * Math.cos(n) * this.data.G.pi))
}
},
})
车牌号码 :
{{modalData.vehNum}}
所在位置:
{{modalData.location}}
地图导航
#map{
width: 100%;
height: 100vh;
}
.detailsBox{
padding: 20rpx 20rpx 0rpx 28rpx;
font-size: 28rpx;
}
.detailsBox view:nth-child(n+2){
margin-top: 20rpx;
}
view{
font-size: 18px;
}
.dh {
display: inline-block;
/* padding: 10px 20px; */
color: rgb(76, 36, 255);
font-size: 15px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-left: 20px;
}
.dh:hover {
background-color: #0056b3;
}