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

2023-12-14 09:03| 来源: 网络整理| 查看: 265

微信小程序地图导航实例讲解先上演示视频准备工作如下在app.json中添加 watch页面代码watch.wxmlwatch.wxsswatch.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 部分商品展示--更多请到店参观

【本文地址】

公司简介

联系我们