官方案例中点聚合运行到安卓真机为什么都不显示?
<template>
<view class="content">
<map
id="map"
class="map"
:show-location="true"
:latitude="latitude"
:longitude="longitude"
style="width: 100%; height: 100vh"
></map>
</view>
</template>
<script>
const img = "/static/logo.png";
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.32452,
};
},
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 positions = [
{
latitude: 23.099994,
longitude: 113.32452,
},
{
latitude: 23.099994,
longitude: 113.32252,
},
{
latitude: 23.099994,
longitude: 113.32652,
},
{
latitude: 23.096994,
longitude: 113.32952,
},
];
const markers = [];
positions.forEach((p, i) => {
markers.push(
Object.assign(
{},
{
id: i + 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 200,
height: 100,
borderWidth: 1,
borderRadius: 10,
bgColor: "#ffffff",
content: `label ${i + 1}`,
},
},
p
)
);
});
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log("addMarkers", res);
},
});
},
},
};
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>
``