效果圖：
一、準(zhǔn)備階段
- 1、在高德開(kāi)放平臺(tái)注冊(cè)成為開(kāi)發(fā)者
- 2、申請(qǐng)開(kāi)發(fā)者密鑰（key）。
- 3、下載并解壓高德地圖微信小程序SDK
高德開(kāi)放平臺(tái)：
注冊(cè)賬號(hào)(https://lbs.amap.com/)) 申請(qǐng)小程序應(yīng)用的 key
應(yīng)用管理(https://console.amap.com/dev/key/app)) -> 我的應(yīng)用 -> 創(chuàng)建新應(yīng)用
生成的 key 即可用在程序中
- 下載相關(guān) sdk 文件，導(dǎo)入 amap-wx.js 到項(xiàng)目中：https://lbs.amap.com/api/wx/download
微信小程序:
1.在創(chuàng)建的項(xiàng)目中，新建一個(gè)名為 libs 目錄，將 amap-wx.js （amap-wx.js 從相關(guān)下載頁(yè)面下載的 zip 文件解壓后得到）文件拷貝到 libs 的本地目錄下，如下圖所示。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-714993.html
2.設(shè)置小程序安全通訊域名，為了保證高德小程序 SDK 中提供的功能的正常使用，需要設(shè)置安全域名。
登錄微信公眾平臺(tái)，在 “設(shè)置”－>“開(kāi)發(fā)設(shè)置” 中設(shè)置 request 合法域名，將 https://restapi.amap.com 中添加進(jìn)去，如下圖所示：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-714993.html
- app.json中加入
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示",
"dowload": "您的文件訪問(wèn)權(quán)限用于打開(kāi)文件"
}
},
在你需要引用地圖的頁(yè)面的js文件中引入 amap-wx.js 文件。
var amapFile = require('../../../libs/amap-wx.130'); //如：..-/..-/libs/amap-wx.js
完整代碼
// pages/map/map-container/map-container.js
import {
baipaoGps
} from "../../../utils/api/car.js";
//百度地圖
var bmap = require('../../../libs/bmap-wx.min.js');
//高德地圖
var amapFile = require('../../../libs/amap-wx.130');
Page({
data: {
longitude: 117.3590007750093, //經(jīng)度
latitude: 22.846911841310202, //維度
scale: 17, //地圖默認(rèn)縮放等級(jí)
showModal: false, //彈框顯隱
modalData: {}, //詳情信息
G: {
pi: 3.141592653589793,
a: 6378245,
ee: .006693421622965943,
x_pi: 52.35987755982988
},
licence: '', //車牌號(hào)
markers: [], //點(diǎn)位數(shù)據(jù)
gpsInfo: {}, //定位數(shù)據(jù)
},
onLoad: function (options) {
if (options) {
if (options.gpsInfo) {
const decodedGpsInfo = decodeURIComponent(options.gpsInfo);
const gpsInfo = JSON.parse(decodedGpsInfo);
if (gpsInfo.type === '2') {
// // 創(chuàng)建百度地圖實(shí)例
const BaiDuMap = new bmap.AMapWX({
key: '', // 你的高德地圖API Key
});
} else if (gpsInfo.type === '2') {
// 創(chuàng)建高德地圖實(shí)例
const myAmapFun = new amapFile.AMapWX({
key: '', // 你的高德地圖API Key
});
}
this.data.markers.push(gpsInfo);
this.setData({
markers: this.data.markers
});
// //初始化地圖
// this.mapCtx = wx.createMapContext('map');
this.loadMarkers();
}
} else {
wx.showToast({
title: '車牌號(hào)為空',
icon: 'none'
})
}
},
loadMarkers: function () {
//生成 markers 列表，用于在地圖上展示
let markersData = this.data.markers.map(marker => {
// console.log(marker)
var a = this.transfor2Mars(Number(marker.lat), Number(marker.lng));
return {
id: Number(marker.id),
longitude: a.Lng,
latitude: a.Lat,
vehNum: marker.licenseName,
location: marker.address,
iconPath: '../../../static/img/marker.png',
width: 40,
height: 40,
};
});
this.setData({
markers: markersData,
longitude: markersData[0].longitude,
latitude: markersData[0].latitude
});
},
// 點(diǎn)擊標(biāo)記點(diǎn)時(shí)觸發(fā)
markertap(e) {
//點(diǎn)擊 marker 時(shí)觸發(fā)，獲取對(duì)應(yīng)的點(diǎn)位信息并展示彈框
// console.log(e.detail)
let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
this.setData({
showModal: true,
modalData: markerData
});
},
// 關(guān)閉彈框
onClose() {
this.setData({
showModal: false
});
},
navigateToMap() {
const modalData = this.data.modalData;
const {
longitude,
latitude
} = modalData;
// 調(diào)用小程序API打開(kāi)高德地圖并進(jìn)行導(dǎo)航
wx.openLocation({
longitude,
latitude,
name: modalData.location, // 標(biāo)記點(diǎn)名稱，可根據(jù)實(shí)際情況設(shè)置
scale: 18, // 地圖縮放級(jí)別，可根據(jù)實(shí)際情況設(shè)置
});
},
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>
<!-- 地圖控件 -->
<view>
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
bindmarkertap="markertap">
</map>
</view>
<!-- 彈框 -->
<view>
<van-popup closeable bind:close="onClose" round custom-style="height: 30%" position="bottom" show="{{ showModal }}"
bind:close="onClose">
<view class="detailsBox">
<view>
<text>車牌號(hào)碼 :</text>
<text>{{modalData.vehNum}}</text>
</view>
<view>
<text>所在位置：</text>
<text>{{modalData.location}}</text>
<view class="dh" bindtap="navigateToMap">地圖導(dǎo)航
</view>
<image style="width: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(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;
}
到了這里，關(guān)于高德地圖實(shí)現(xiàn)-微信小程序地圖導(dǎo)航的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
