自己建站网站,wordpress 体育主题公园,网站建设一般的流程,网站制作进度表效果图#xff1a; 一、准备阶段
1、在高德开放平台注册成为开发者2、申请开发者密钥#xff08;key#xff09;。3、下载并解压高德地图微信小程序SDK
高德开放平台#xff1a;
注册账号(https://lbs.amap.com/)) 申请小程序应用的 key
应用管理(https://console.ama…
效果图 一、准备阶段
1、在高德开放平台注册成为开发者2、申请开发者密钥key。3、下载并解压高德地图微信小程序SDK
高德开放平台
注册账号(https://lbs.amap.com/)) 申请小程序应用的 key
应用管理(https://console.amap.com/dev/key/app)) - 我的应用 - 创建新应用生成的 key 即可用在程序中
下载相关 sdk 文件导入 amap-wx.js 到项目中https://lbs.amap.com/api/wx/download
微信小程序:
1.在创建的项目中新建一个名为 libs 目录将 amap-wx.js amap-wx.js 从相关下载页面下载的 zip 文件解压后得到文件拷贝到 libs 的本地目录下如下图所示。
2.设置小程序安全通讯域名为了保证高德小程序 SDK 中提供的功能的正常使用需要设置安全域名。登录微信公众平台在 “设置”“开发设置” 中设置 request 合法域名将 https://restapi.amap.com 中添加进去如下图所示
app.json中加入
permission: {scope.userLocation: {desc: 你的位置信息将用于小程序位置接口的效果展示,dowload: 您的文件访问权限用于打开文件}},在你需要引用地图的页面的js文件中引入 amap-wx.js 文件。
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))}},
})
view!-- 地图控件 --viewmap idmap longitude{{longitude}} latitude{{latitude}} scale{{scale}} markers{{markers}}bindmarkertapmarkertap/map/view!-- 弹框 --viewvan-popup closeable bind:closeonClose round custom-styleheight: 30% positionbottom show{{ showModal }}bind:closeonCloseview classdetailsBoxviewtext车牌号码 :/texttext{{modalData.vehNum}}/text/viewviewtext所在位置/texttext{{modalData.location}}/textview classdh bindtapnavigateToMap地图导航/viewimage stylewidth:30px;height:30px;margin-top: 5px;position: absolute;src/static/img/map/daohang.png/image/view/view/van-popup/view
/view#map{width: 100%;height: 100vh;
}.detailsBox{padding: 20rpx 20rpx 0rpx 28rpx;font-size: 28rpx;
}
.detailsBox view:nth-child(n2){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;
}
