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

微信小程序实现导航至目的地

news 2025/8/16 11:21:45

本人做的导航页面相关功能和效果的代码

javascript相关

Page({data: {markers: [],latitude: '',  // 中心点坐标longitude: '',FIXED_LAT: 31.2304, // 1. 写死的目标点坐标, 示例：上海人民广场FIXED_LNG: 121.4737},onLoad: function () {// 如果要显示地图可以看onLoad方法里面的逻辑，如果只要一个导航功能看navigateToMap的逻辑就行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: 30callout: {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, // 地图缩放级别，可根据实际情况设置address:'示例地址：上海人民广场'});},
})

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"><text class="h1">示例目的地：目标点</text><text>示例地址：上海人民广场</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>