8 changed files with 119 additions and 51 deletions
@ -1,8 +1,76 @@ |
|||
<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> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.map { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
Loading…
Reference in new issue