高德地图实现-微信小程序地图导航

大家好，欢迎来到IT知识分享网。

效果图：

一、准备阶段

• 1、在高德开放平台注册成为开发者
• 2、申请开发者密钥（key）。
• 3、下载并解压高德地图微信小程序SDK
  
  

高德开放平台：

• 下载相关 sdk 文件，导入 amap-wx.js 到项目中：https://lbs.amap.com/api/wx/download
  
  

微信小程序:

3. app.json中加入

"permission": { 
    "scope.userLocation": { 
    "desc": "你的位置信息将用于小程序位置接口的效果展示", "dowload": "您的文件访问权限用于打开文件" } }, 

在你需要引用地图的页面的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.93, //经度 latitude: 22.0202, //维度 scale: 17, //地图默认缩放等级 showModal: false, //弹框显隐 modalData: {}, //详情信息 G: { pi: 3.9793, a: , ee: .0065943, x_pi: 52.988 }, licence: '', //车牌号 markers: [], //点位数据 gpsInfo: {}, //定位数据 }, onLoad: function (options) { if (options) { if (options.gpsInfo) { const decodedGpsInfo = decodeURIComponent(options.gpsInfo); const gpsInfo = JSON.parse(decodedGpsInfo); if (gpsInfo.type === '2') { // // 创建百度地图实例 const BaiDuMap = new bmap.AMapWX({ key: '', // 你的高德地图API Key }); } else if (gpsInfo.type === '2') { // 创建高德地图实例 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: '车牌号为空', 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 }); }, // 点击标记点时触发 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> <!-- 地图控件 --> <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>车牌号码 :</text> <text>{ 
  {modalData.vehNum}}</text> </view> <view> <text>所在位置：</text> <text>{ 
  {modalData.location}}</text> <view class="dh" bindtap="navigateToMap">地图导航 </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; }