当前位置：首页 > news >正文

微信小程序使用高德api实现导航至目的地

news 2025/8/16 17:31:48

点击下载微信小程序插件包

https://lbs.amap.com/api/wx/download

去高德地图控制台申请一个key（本博客示例中没用到）

这里注意key的服务平台一定要是微信小程序，key的名称随便填写，如图:
在这里插入图片描述

提交完毕后复制生成的key

可以参考官方demo做一下效果

https://lbs.amap.com/api/wx/gettingstarted

本人做的导航页面相关功能和效果的代码（这里目标点我写死了，没用到key）

javascript相关

var amapFile = require('../../../utils/amap-wx'); //如：../../libs/amap-wx.jsvar markersData = [];
Page({data: {markers: [],latitude: '',  // 中心点坐标longitude: '',FIXED_LAT: 31.2304, // 1. 写死的目标点坐标, 示例：上海人民广场FIXED_LNG: 121.4737},onLoad: function () {let that = this;// 2. 获取我的位置wx.getLocation({type: 'gcj02',success: (res) => {// 3. 构造目的地的 markerconst markers = [{id: 0,latitude: that.data.FIXED_LAT, // 目标点的makerlongitude: that.data.FIXED_LNG, // // 目标点的maker// iconPath: '/static/img/marker_fixed.png', // 自定义maker图片路径和长宽// width: 30,// height: 30,callout: {content: '固定点', // 气泡里要显示的文字display: 'ALWAYS' // 让气泡一直显示出来，不需要用户点击}}, ];// 4. 更新地图中心店，地图中心可以取固定点(将目标点设为地图中心点)this.setData({latitude: this.data.FIXED_LAT,longitude: this.data.FIXED_LNG,markers});},fail: (e) => {wx.showToast({title: '定位失败',icon: 'none'});}});},// 导航,点击后会调用高德地图默认的导航页面导航navigateToMap() {const {longitude,latitude} = this.data;// 调用小程序API打开高德地图并进行导航wx.openLocation({longitude, // 目的地坐标latitude,name: '哈哈哈哈', // 标记点名称，可根据实际情况设置scale: 18, // 地图缩放级别，可根据实际情况设置});},
})

wxss

.map_container{position: absolute;top: 0;bottom: 80px;left: 0;right: 0;
}
.map{width: 100%;height: 100%;
}
.map_text{position: absolute;left: 0;right: 0;bottom: 0px;height: 80px;background: #fff;padding: 0 15px;
}
text{margin: 5px 0;display: block;font-size:12px;
}
.h1{margin: 15px 0;font-size:15px;
}

wxml

<view class="map_container"><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
<view class="map_text"><view bind:tap="navigateToMap" style="border: 1rpx solid #cccccc;margin-top: 50rpx;width: fit-content;padding: 20rpx 40rpx;border-radius: 20rpx;background-color: #eeeeee;margin-left: 50%;transform: translateX(-50%);">导航</view>
</view>