效果图：

一、准备阶段

• 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 中添加进去，如下图所示：

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.jsimport {  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, //经度    latitude: 22.846911841310202, //维度    scale: 17, //地图默认缩放等级    showModal: false, //弹框显隐    modalData: {}, //详情信息    G: {      pi: 3.141592653589793,      a: 6378245,      ee: .006693421622965943,      x_pi: 52.35987755982988    },    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;}