uni 微信小程序生成聚合点，点击导航到当前聚合点
2024-06-25 17:18:28
1.生成聚合点代码，并自定义标注 （代码和结果如下）
<template><view class="page-body"><header-bar title="采样点查询" :backFlag="true"></header-bar><map show-locationclass="map"id="map":latitude="location.latitude":longitude="location.longitude":scale="scale":markers="markers"subkey="7DCBZ-MUN6U-C6NVI-BR3C2-YBODH-RUFMX"layer-style="2"@markertap="bindmarkertap"><cover-view slot="callout"><view class="label" v-for="(item,index) in markers" :key="index"><cover-view style="box-shadow: 0px 0px 6px 2px #ffffff;" :marker-id="item.id" >{{ item.title }}</cover-view></view></cover-view></map><ponit-information ref="ponitRef"></ponit-information></view>
</template><script>
import headerBar from "../../components/header-bar/header.vue"
import ponitInformation from "./ponitInformation"export default {name: "transcodingAppeal",components:{headerBar,ponitInformation},data(){return {mapCtx: null,scale: 11.5,location: {latitude: 34.72468,longitude: 113.6401,},markers: [{id: 1,title: '核酸检测点1',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.75436,longitude: 113.771447,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 2,title: '核酸检测点2',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.820055,longitude: 113.743276,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 3,title: '核酸检测点3',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.79255,longitude: 113.681473,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 4,title: '核酸检测点4',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.767645,longitude: 113.6694,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 5,title: '核酸检测点5',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.751038,longitude: 113.665375,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 6,title: '核酸检测点6',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.732766,longitude: 113.832388,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 7,title: '核酸检测点7',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.691698,longitude: 113.784095,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}},{id: 8,title: '核酸检测点8',address: '郑州市中牟县豫兴办事处郑东新区郑开大道与通商路交叉口亨泽物流园',time:'上午8:00-12:00下午23:00-18:00',city:'郑州市',area: '中牟县',latitude: 34.774359,longitude: 113.765241,joinCluster: true,width: 24,height: 30,iconPath: 'https://static.youxiubiji.com/uploads/20220628/16564044320667695.png',customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}}],}},onLoad: function(){this.mapCtx = wx.createMapContext('map', this);this.openAggator()},methods:{openAggator() {this.mapCtx.initMarkerCluster({enableDefaultStyle: false,zoomOnClick: true,gridSize: 60,complete(res) {console.log('initMarkerCluster', res)}})this.scale = 11this.mapCtx.on('markerClusterCreate', res => {console.log('clusterCreate', res.clusters)const clusters = res.clustersconst markers = clusters.map(cluster => {const {center,clusterId,markerIds} = clusterreturn {...center,width: 0,height: 0,clusterId, // 必须label: {content: markerIds.length + '',fontSize: 16,width: 50,color: '#ffffff',height: 50,bgColor: '#da4339',borderRadius: 25,textAlign: 'center',anchorX: 0,anchorY: -40,}}})console.log('markers', markers)this.mapCtx.addMarkers({markers,clear: false,complete(res) {console.log('clusterCreate addMarkers', res)}})})},bindmarkertap(e){let mark = this.markers.filter(item=>{return item.id == e.markerId})[0]this.$refs.ponitRef.queryMark(mark)},getCenterLocation: function () {this.mapCtx.getCenterLocation({success: function(res){console.log(res.longitude)console.log(res.latitude)}})},}
}
</script><style scoped>
.page-body {width: 100%;height: 100%;
}
.map {width: 100%;height: 100%;color: #d92828;font-weight: 500;
}</style>
2.点击覆盖物弹出当前详情 （代码和结果如下）
<template><uni-popup ref="popup" type="bottom"><view class="content"><view class="title-wrapper"><view class="title">{{mark.title}}</view><view class="subTitle">{{mark.address}}</view></view><view class="main"><view class="list"><view class="list-label">机构名称：</view><view class="list-desc">{{mark.title}}</view></view><view class="list"><view class="list-label">核酸工作时：</view><view class="list-desc">{{mark.time}}</view></view><view class="list"><view class="list-label">详细地址：</view><view class="list-desc">{{mark.address}}</view></view><view class="list"><view class="list-label">所属地市：</view><view class="list-desc">{{mark.city}}</view></view><view class="list"><view class="list-label">所属区县：</view><view class="list-desc">{{mark.area}}</view></view></view><view class="btn"><button type="primary" plain="true" @click="goNavigation">导航到这里</button></view></view></uni-popup>
</template><script>
export default {name: "ponitInformation",data(){return{mark: {}}},methods:{queryMark(mark){this.mark = markthis.$refs.popup.open('bottom')},goNavigation(){let plugin = requirePlugin('routePlan');let key = 'SPJBZ-UQXEV-DC2PK-USPZ7-UHFLE-SZFT2'; //使用在腾讯位置服务申请的keylet referer = '采样点查询';//调用插件的app的名称let navigation = 1let endPoint = JSON.stringify({ //终点'name': this.mark.title,'latitude': this.mark.latitude,'longitude': this.mark.longitude,});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&navigation='+ navigation +'&endPoint=' + endPoint});}}
}
</script><style lang="scss" scoped>
.content {background-color: #ffffff;min-height: 400rpx;border-radius: 10px;padding: 20rpx 20rpx;.title-wrapper {padding-left: 10px;.title{font-size: 16px;font-weight: bolder;color: #403f43;margin: 10px 0;}.subTitle {font-size: 12px;color: #8b8b8f;}}.main {font-size: 12px;color: #47474b;padding-bottom: 80rpx;padding: 0rpx 40rpx;margin-top: 8rpx;.list {border-top: 1px solid rgba(250, 245, 245, 0.87);display: flex;padding: 20rpx 0;.list-label {white-space:nowrap;}}}.btn {width: 400rpx;margin: 0 auto;padding: 80rpx 0 100rpx 0;}
}
</style>
3.调用微信开放组件，首先再腾讯位置服务中申请key，然后找到微信小程序里面的设置，第三方设置找到插件管理，搜索并添加腾讯位置服务路线规划，uniapp的manifest.json配置 ，（代码和结果如下）
"plugins": {"routePlan": {"version": "1.0.18","provider": "wx50b5593e81dd937a"}},"permission" : {"scope.userLocation" : {"desc" : "获取当前位置"}}
``
## ```4.直接调用路线规划组件 代码和结果如下```htmllet plugin = requirePlugin('routePlan');let key = 'SPJBZ-UQXEV-DC2PK-USPZ7-UHFLE-SZFT2'; //使用在腾讯位置服务申请的keylet referer = '采样点查询';//调用插件的app的名称let navigation = 1let endPoint = JSON.stringify({ //终点'name': this.mark.title,'latitude': this.mark.latitude,'longitude': this.mark.longitude,});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&navigation='+ navigation +'&endPoint=' + endPoint});uni 微信小程序生成聚合点，点击导航到当前聚合点相关推荐
- 微信小程序中实现点击导航条切换页面（可左右滑动视图）
我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状 ...
- uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图 需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
- 【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
- uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
- 微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮 弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消 提示:您选择了菜单{ ...
- 微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件 在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义 ...
- 【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景 调用微信小程序生成二维码接口,提示报错 错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
- 微信小程序生成带参数的二维码
微信小程序生成带参数的二维码 //写一个图片来写路径,好让二维码显示出来 <image style="width:500rpx;height:500rpx;" src=&qu ...
- 微信小程序生成Excel
微信小程序生成Excel 一.问题描述 最近一直在查找在微信小程序中生成Excel的办法.需求就是根据一个json数据或者对象数组,生成一个Excel文件,或者打开Excel文件.网上找了很久,没找到 ...
最新文章
- python 局域网通讯_python3 实现tcp/udp局域网通信
- JAVA实现数值的整数次方（《剑指offern》）
- 在UltraWebGrid单元格中绑定dropdownlist
- php 值不进行解码,无法解码PHP中的JSON值
- java 基本功 —— 内存相关
- linux u盘刻录软件,Deepin Linux下刻录Windows安装U盘：WoeUSB的介绍和应用
- python自关联_django自关联,auth模块
- 微课|玩转Python轻松过二级（2.2.4节）：位运算符与集合运算符
- firfox post plugin test
- win11系统通知怎么取消 Windows11取消系统通知的步骤方法
- mysql 用户权限管理
- Python 进阶——标准散列机制
- HTML5期末大作业：家具家居网站设计——智能家居(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 学生静态网页制作...
- 传统方法做分割 解析种子cues
- watir学习系列--对话框处理
- php+网络测速,网络测速步骤
- android手机管理器在哪里打开,小米手机任务管理器在哪？怎么打开？
- ansible一键部署zabbix并配置自动发现
- mini-vue之组件的实现和渲染流程 以及局部和全局组件建立的联系
- ZYNQ - 嵌入式Linux开发 -10- ZYNQ启动流程分析