You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
1.9 KiB
98 lines
1.9 KiB
<template>
|
|
<view class="content">
|
|
<map id="map" class="map" style="width: 100%;height: 100vh;" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const img = '../../../static/img/logo.png';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
latitude: 23.099994,
|
|
longitude: 113.324520,
|
|
}
|
|
},
|
|
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>
|