微信小程序地图导航实例讲解

先上演示视频
- 准备工作
- 如下在app.json中添加
watch页面代码
- watch.wxml
- watch.wxss
- watch.js
connect导航页面
- 使用在腾讯位置服务需要获取key
- 地图选点
- - 当用户未点击选址时，默认传入用户当前地址，可以在onShow方法中定义
- 代码解读
地图导航

先上演示视频

微信小程序地图导航

准备工作

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

如下在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设置

地图选点

记得引入插件

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技术栈】，进入公众号回复“小程序导航”查看。

微信小程序地图导航实例讲解相关推荐

微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
详解微信小程序地图组件实例：远征军墓地分布图小程序
先上效果图,有兴趣再往下看. 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称"西保火车站墓 ...
微信小程序地图导航源码、地图导航小程序源码
最近研究了微信小程序地图功能,编写了地图导航功能的Demo(文章尾部附有下载地址). 1.用户定位功能:用户同意小程序获取位置权限,并定位用户当前位置: 2.选择目的地,并开始自动导航功能 2.选择交 ...
微信小程序地图导航集成（PHP）
客户界面 <view class="page-body"><view class="page-section page-section-gap" ...
微信小程序地图导航（跳转到第三方导航）
目录所需API 所需参数 wxml JS 效果图所需API wx.openLocation 在这里,我们需要用到微信官方文档的位置API wx.openLocation 其中的参数有很多,具体可参 ...
微信小程序-地图导航
功能描述:发布信息的时候选择位置:详情页展示的时候展示位置名称并且可以导航到该位置. 1)选择位置 chooseLocation: function () {let that = this;wx.ch ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序制作课程表_微信小程序实现课程表实例
前言感谢! 承蒙关照~微信小程序实现课程表实例效果图: 小程序代码如下 wxml: {{bj}} {{name}} 8:00 语文语文数学数学语文 9:00 语文语文数学数学语文 ...
微信小程序ar导航特点详解
微信小程序通过便捷的使用方式和较低的获客成本,全面覆盖了各个领域,不断改善我们的生活方式,而AR导航解决了导航最后一公里的问题,突破传统的地图导航.指示牌指引.问路等方式带来的不便,能够在眼睛看到的实 ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...

微信小程序地图导航实例讲解

微信小程序地图导航实例讲解

先上演示视频

准备工作

如下在app.json中添加

watch页面代码

watch.wxml

watch.wxss

watch.js

connect导航页面

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

地图选点

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

代码解读

地图导航

微信小程序地图导航实例讲解相关推荐

最新文章

热门文章