先上演示视频

微信小程序地图导航

准备工作

首先创建好页面和添加地图导航和选址插件，【需要授权】

如下在app.json中添加

 "pages":["pages/watch/watch","pages/connect/connect"],"plugins": {"routePlan": {"version": "1.0.5","provider": "wx50b5593e81dd937a"},"chooseLocation": {"version": "1.0.3","provider": "wx76a9a06e5b4e693e"}},"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},

保存后会报错，提示添加插件
在这里插入图片描述
点击添加

app.json中添加tabBar

 "tabBar": {"color": "#bfbfbf","selectedColor": "#d4237a","list": [{"pagePath": "pages/watch/watch","text": "商品展示","iconPath": "/assets/icon/goods_nor.png","selectedIconPath": "/assets/icon/goods.png"},{"pagePath": "pages/connect/connect","text": "联系我","iconPath": "/assets/icon/address_nor.png","selectedIconPath": "/assets/icon/address.png"}]},

删除app.wxss中的样式代码
保存即可预览watch页面内容

watch页面代码

watch.wxml

<view class="container"><view class="header">部分商品展示--更多请到店参观</view><view class="watch" wx:for="{{watchData}}" wx:key="id" class="main"><swiper class="swiper" autoplay circular interval="3000"><swiper-item wx:for="{{item.urls}}" wx:for-item="urls" wx:key="index"><image src="{{urls}}" data-url="{{urls}}" data-urls="{{item.urls}}" mode="aspectFit" bindtap="_previewImg"></image></swiper-item></swiper><view class="title"><view><text class="brandtitle">品牌: </text><text class="ibrandtitle">{{item.brand}}</text></view><view><text class="pricetitle">原价: </text><text class="ipricetitle">{{item.price}}</text></view><view><text class="newpricetitle">折后价: </text><text class="inewpricetitle">{{item.newprice}}</text></view></view></view></view>

watch.wxss

/* pages/watch/watch.wxss */
.main{width: 100vm;margin: 10rpx auto;display: flex;border-bottom: 4rpx solid pink;
}
.swiper{width: 550rpx;height: 550rpx;
}
.title{display: flex;
flex-direction: column;
justify-content: space-evenly
}
.brandtitle{
color: palevioletred;
font-weight: bold;
}
.pricetitle{
color: blueviolet;
font-weight: bold;
}
.newpricetitle{
color: red;
font-weight: bold;
}
.swiper image{display: block;width: 500rpx;height: 500rpx;padding: 20rpx;
}
.header{color: gray;text-align: center;margin: 10rpx
}

watch.js

// pages/watch/watch.js
Page({_previewImg: function (e) {var currentImg = e.currentTarget.dataset.url;var tempArr = [];tempArr = e.currentTarget.dataset.urls;wx.previewImage({current: currentImg, // 当前显示图片的http链接 Stringurls: tempArr // 需要预览的图片http链接列表 Array})},/*** 页面的初始数据*/data: {watchData: [{id: 1,url: "https://img.alicdn.com/imgextra/i1/738790163/O1CN01hvCVV21D4h970Plt2_!!0-saturn_solar.jpg_240x240xz.jpg_.webp",urls: ["https://img.alicdn.com/imgextra/i3/2206840659250/O1CN01cSGVrK2ICYBbcKkZ5_!!2206840659250.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/i2/2206840659250/O1CN01ExT7GW2ICYC5LGVMG_!!2206840659250.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/i3/2206840659250/O1CN01saVX4U2ICYBaTOMfU_!!2206840659250.jpg_430x430q90.jpg"],brand: "卡地亚",introduce: "",price: 7988,newprice: 5699},{id: 2,url: "https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/1985007071/O1CN01B9d2Xt226Z9v4eUAK_!!1985007071.jpg_430x430q90.jpg",urls: ["https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/1985007071/O1CN01B9d2Xt226Z9v4eUAK_!!1985007071.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/1985007071/O1CN01WrKRkK226Z9lzvChL_!!1985007071.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i1/1985007071/O1CN01C0DwPz226Z9nYE196_!!1985007071.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/1985007071/O1CN01sux8uu226Z5sVg2gL_!!1985007071.jpg_430x430q90.jpg"],brand: "罗宾",introduce: "",price: 3988,newprice: 1399},{id: 3,url: "https://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i2/632846530/O1CN01P70gIa1y6mtj5Bqvc_!!632846530.jpg_430x430q90.jpg",urls: ["https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/632846530/O1CN01QPS9gt1y6mtmeaa2m_!!632846530.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/632846530/O1CN01TGkU971y6mtoHLB1y_!!632846530.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/632846530/O1CN01uVpbe11y6mtliiVT9_!!632846530.jpg_430x430q90.jpg","https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/632846530/O1CN01fE6zvS1y6mtlLPYuB_!!632846530.jpg_430x430q90.jpg"],brand: "飞亚达",introduce: "指针",price: 6988,newprice: 2080},{id: 4,url: "https://gd3.alicdn.com/imgextra/i3/1087294774/O1CN01cEwzwz1l8XNcPMh8t_!!1087294774.png_400x400.jpg",urls: ["https://gd1.alicdn.com/imgextra/i1/2208527172/O1CN0187IQHI22qp8DevuRc_!!2208527172.jpg_400x400.jpg","https://gd1.alicdn.com/imgextra/i1/2208527172/O1CN01MtUdUb22qp8D7E97C_!!2208527172.jpg_400x400.jpg","https://gd2.alicdn.com/imgextra/i2/2208527172/O1CN01xCUyn622qp8COsWI5_!!2208527172.jpg"],brand: "梭伦",introduce: "",price:5688,newprice:3860}]}
})

connect导航页面

使用在腾讯位置服务需要获取key

请设置key授权本小程序appId，设置请点击https://lbs.qq.com/console/mykey.html
添加key
key创建成功
点击进入key设置
启用小程序

地图选点

记得引入插件

const chooseLocation = requirePlugin('chooseLocation');

 _pickStartAddress: function(e) {var that = this;console.log('选取地址', e);let latitude = that.data.location.latitude;let longitude = that.data.location.longitude;console.log("latitude", latitude);console.log("longitude", longitude);this.getUserLocation();const key = 'JODBZ-3K2CD-TP643-PIP4E-12345-I4FR5'; //使用在腾讯位置服务申请的keyconst referer = '百里快讯'; //调用插件的app的名称const location = JSON.stringify({latitude: latitude,longitude: longitude});const category = '生活服务,娱乐休闲';wx.navigateTo({url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category});},

当用户未点击选址时，默认传入用户当前地址，可以在onShow方法中定义

 /*** 生命周期函数--监听页面显示*/onShow: function() {this.getUserLocation();const location = chooseLocation.getLocation();console.log(location)this.setData({startAddressInfo: location})},

代码解读

其中 this.getUserLocation();为了初始化获取地图中心点位置
否则无法进行地图选址

const location = chooseLocation.getLocation();是获取选完址后的值
如下图：
在这里插入图片描述

this.setData({startAddressInfo: location})

是将获取的值作为起点地址

地图导航

 _handleSubmit: function(e) {console.log("开始导航", e);// let plugin = requirePlugin('routePlan');const key = 'JODBZ-3K2CD-TP643-PIP4E-12345-I4FR5'; //使用在腾讯位置服务申请的keyconst referer = '百里快讯'; //调用插件的app的名称let endPoint = this.data.endAddressInfo;endPoint = JSON.stringify(endPoint);let startPoint = this.data.startAddressInfo;startPoint = JSON.stringify(startPoint);console.log("==startPoint---", startPoint);let mode = this.data.mode;if (startPoint == 'null') {console.log("无起点进来了");wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=1' + '&mode=' + mode})} else {console.log("有起点进来了");wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&startPoint=' + startPoint + '&navigation=1' + '&mode=' + mode});}},

此时我们就可以完成导航任务了。
我这里的导航终点是固定的位置：
data数据如下：

data: {location: {},startAddressInfo: {},endAddressInfo: {address: "湖北省武汉市武昌区武车路与长喻路交叉口东南",city: "武汉市",latitude: 30.574808,longitude: 114.323756,name: "F6漫时区"},mode: "driving"},

其中的mode是出行方式。
完整代码请微信搜索公众号【小猪IT技术栈】，进入公众号回复“小程序导航”查看。