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