uni 微信小程序生成聚合点，点击导航到当前聚合点
1.生成聚合点代码，并自定义标注 （代码和结果如下）
<template>
<view class="page-body">
<header-bar title="采样点查询" :backFlag="true">header-bar>
<map show-location
class="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 = 11
this.mapCtx.on('markerClusterCreate', res => {
console.log('clusterCreate', res.clusters)
const clusters = res.clusters
const markers = clusters.map(cluster => {
const {
center,
clusterId,
markerIds
} = cluster
return {
...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 = mark
this.$refs.popup.open('bottom')
},
goNavigation(){
let plugin = requirePlugin('routePlan');
let key = 'SPJBZ-UQXEV-DC2PK-USPZ7-UHFLE-SZFT2'; //使用在腾讯位置服务申请的key
let referer = '采样点查询';//调用插件的app的名称
let navigation = 1
let 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.直接调用路线规划组件 代码和结果如下
```html
let plugin = requirePlugin('routePlan');
let key = 'SPJBZ-UQXEV-DC2PK-USPZ7-UHFLE-SZFT2'; //使用在腾讯位置服务申请的key
let referer = '采样点查询';//调用插件的app的名称
let navigation = 1
let 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
});