<template>
<view class="page-body">
<view class="page-section page-section-gap">
<map :id="mapId" :ref="mapId" show-location :style="{width: '100%',height:height}" :latitude="lat||0"
:longitude="lng||0">
</map>
</view>
</view>
</template>
<script>
export default {
name: "myMap",
props: {
lng: String || Number,
lat: String || Number,
height: {
type: String,
default: '300px'
},
// location:{
// type:Array,
// default:[0,0]
// },
markers: Array,
},
data() {
return {
mapContext: null,
mapId: "myMap",
}
},
computed: {
realMarkers() {
// console.log('变化', this.markers)
let list = []
for (let index in this.markers) {
let data = this.markers[index]
let obj = {
id: Number(data.id),
latitude: data.latitude,
longitude: data.longitude,
title: data.title,
joinCluster: true, // 指定了该参数才会参与聚合
width: 25,
height: 25,
iconPath: "/static/img/map/projectShow.png",
label: {
// width: 50,
// height: 30,
// borderWidth: 1,
// borderRadius: 10,
// bgColor: '#ffffff'
anchorX: -25,
anchorY: 10,
content: data.title,
color: '#4399fc',
bgColor: '#fff',
padding: 5,
borderRadius: 5,
},
}
list.push(obj)
}
return list
}
},
mounted() {
this.renderMarkers()
},
methods: {
renderMarkers() {
let that = this
// uni.toJSON=()=>{}
let mapContext = uni.createMapContext(this.mapId, this)
console.log('地图实例', mapContext)
// return
this.mapContext = mapContext
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
that.addMarkers()
}
});
mapContext.on("markerClusterCreate", (res) => {
console.log("创建聚合簇", res);
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: 20,
width: 50,
height: 50,
bgColor: '#fff',
borderRadius: 50,
textAlign: 'center',
anchorX: 0,
anchorY: 0,
}
}
})
mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('clusterCreate addMarkers', res)
}
})
});
},
addMarkers() {
if (this.mapContext && this.realMarkers.length > 1) {
this.mapContext.moveToLocation()
}
this.mapContext.addMarkers({
markers: this.realMarkers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
}
},
}
</script>
<style>
</style>
- 发布:2022-10-10 18:40
- 更新:2022-10-14 12:15
- 阅读:236
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 教育版
HBuilderX类型: 正式
HBuilderX版本号: 3.6.4
手机系统: Android
手机系统版本号: Android 11
手机厂商: 荣耀
手机机型: 荣耀v60pro
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
贴以上代码
贴以上代码
预期结果:
app端与小程序一样运行正常
app端与小程序一样运行正常
实际结果:
小程序运行正常,app端报错,并且未显示marker或聚合
小程序运行正常,app端报错,并且未显示marker或聚合
bug描述:
小程序一切正常,在app运行出现[Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.报错