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.
76 lines
1.5 KiB
76 lines
1.5 KiB
<template>
|
|
<view class="content">
|
|
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
latitude: 33.338538,
|
|
longitude: 120.153567,
|
|
}
|
|
},
|
|
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() {
|
|
console.log(111,this._mapContext)
|
|
this._mapContext.addGroundOverlay({
|
|
id: 1,
|
|
src: 'https://static.ticket.sz-trip.com/yandu/images/maps/6/53/25.png',
|
|
bounds: {
|
|
southwest: {//左下角GPS
|
|
longitude: 119.700158,
|
|
latitude: 33.112837
|
|
},
|
|
northeast: {//右上角GPS
|
|
longitude: 120.25057,
|
|
latitude: 33.458095
|
|
}
|
|
},
|
|
zIndex: 1, // 图层绘制顺序
|
|
success: () => {
|
|
console.log("显示成功", southwest, northeast)
|
|
},
|
|
fail: (e) => {
|
|
console.log("显示失败", e)
|
|
},
|
|
complete: res => {
|
|
console.log(res)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.map {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|