<template>
<view class="content">
<map id="map" :markers="covers" class="map" :show-location="true" :latitude="latitude" :longitude="longitude">
<cover-view slot="callout">
<template v-for="(item,index) in covers">
<cover-view :marker-id="item.id" :key="item.id">
<cover-image src="../../static/logo.png"></cover-image>
</cover-view>
</template>
</cover-view>
</map>
</view>
</template>
<script>
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 23.099994,
longitude: 116.39742,
covers: [{
id: 1,
latitude: 23.099994,
longitude: 116.39742,
iconPath: '../../static/logo.png',
customCallout: {
display: "ALWAYS"
}
}]
}
},
onReady() {
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
//this.addMarkers();
},
methods: {
addMarkers() {
const marker = {
id: 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
};
const positions = [{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}]
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign({}, marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
})
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>

- 发布:2022-07-30 15:08
- 更新:2022-08-25 14:37
- 阅读:1122
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.5.3
手机系统: Android
手机系统版本号: Android 12
手机厂商: 小米
手机机型: k30s
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
新建nvue项目,复制代码示例里的代码运行即可
新建nvue项目,复制代码示例里的代码运行即可
预期结果:
customCallout 出现图片
customCallout 出现图片
实际结果:
app闪退
app闪退
bug描述:
map组件下的customCallout里面包含cover-image ,app就会闪退
