<view class="container-map">
<map v-if="showMap" class="map" id="map" :show-location="true" :latitude="lat" :longitude="lng"
@markertap="markertap">
<!-- :markers="markers" -->
</map>
</view>
</template>
<script>
// const markerImg = '../../static/images/location.png'
export default {
props: {
lat: {
type: Number,
default: 22.940088,
},
lng: {
type: Number,
default: 113.341652,
},
iconPath: {
type: String,
default: '../../static/images/location.png'
}
},
data() {
return {
mapHeight: undefined,
markers: [],
showLocation: false,
// 记录当前点击的markerId
currentId: undefined,
showMap: false,
dataList: [{
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.340976,
latitude: 22.940148,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.341276,
latitude: 22.939535,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.341942,
latitude: 22.939179,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.342199,
latitude: 22.94076,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.341684,
latitude: 22.939911,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.341942,
latitude: 22.939179,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.342199,
latitude: 22.94076,
}, {
projectId: "1",
name: "测试",
issueDate: "2022-12-09",
address: "广州",
longitude: 113.341684,
latitude: 22.939911,
}]
}
},
onReady() {
this.createMapContext();
},
methods: {
createMapContext() {
this.mapContext = uni.createMapContext("map", this);
this.mapContext.initMarkerCluster({
enableDefaultStyle: true,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log("initMarkerCluster", res)
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
this.mapContext.on('markerClusterClick', (res) => {})
this.addMarkers()
},
// 添加marker
addMarkers() {
console.log("addMarkers")
var markers = []
const marker = {
id: 1,
iconPath: "/static/images/location.png",
width: 38,
height: 38,
joinCluster: true,
}
this.dataList.forEach((m, i) => {
var newMarker = Object.assign({}, marker, m)
newMarker.id = i + 1000
// newMarker.latitude = m.latitude
// newMarker.longitude = m.longitude
markers.push(newMarker)
})
this.markers = [].concat(markers)
this.mapContext.addMarkers({
markers: markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
this.showMap = true
},
// marker点击事件
markertap(e) {
console.log("markertap", e)
},
}
}
</script>
<style scoped>
.container-map {
flex: 1;
}
.map {
width: 750rpx;
height: 1400rpx;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
</style>
- 发布:2022-12-12 15:33
- 更新:2022-12-14 14:18
- 阅读:270
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS 12.2.1
HBuilderX类型: 正式
HBuilderX版本号: 3.6.13
手机系统: Android
手机系统版本号: Android 7.0
手机厂商: 华为
手机机型: nova
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
1.创建vue页面;
2.通过subnvue引入nvue页面;
3.nvue子页面使用map组件;
4.map组件使用点聚合
1.创建vue页面;
2.通过subnvue引入nvue页面;
3.nvue子页面使用map组件;
4.map组件使用点聚合
预期结果:
点聚合能正常显示
点聚合能正常显示
实际结果:
点聚合没有效果
点聚合没有效果
bug描述:
vue页面通过subnvues引入的nvue子页面加载map组件,点聚合无效果,this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});没有回调