需求描述
開發者能夠在地圖組件上添加可以回應點擊事件的自定義控制元件，
實作分析
該示例在地圖組件上放置了兩個用來放大和縮小地圖顯示級別的控制元件按鈕，點擊控制元件按鈕，觸發地圖組件的控制元件點擊事件，通過 id 識別被點擊的控制元件，然后分別進行邏輯處理，
示例截圖：
解決方法
代碼如下：
<template>
<div>
<map style="width:{{width}}; height:{{height}}" id="map" scale="{{scale}}" controls="{{controls}}" @controltap="controlTap"></map>
</div>
</template>
<script>
import prompt from '@system.prompt'
export default {
private: {
width: '100%',
height: '50%',
scale: 17,
controls: [
{
id: 1,
position: { right: '15px', bottom: '300px', width: '70px' },
iconPath: '/Common/plus.png'
},
{
id: 2,
position: { right: '15px', bottom: '200px', width: '70px' },
iconPath: '/Common/minus.png'
}
]
},
controlTap(res) {
switch (res.controlId) {
case 1:
this.scale++
// 因為地圖縮放級別有上限，防止持續生成無效值
this.$element('map').getScale({
success: res => {
this.scale = res.scale
}
})
prompt.showToast({ message: '控制元件：放大地圖' })
break
case 2:
this.scale--
// 因為地圖縮放級別有下限，防止持續生成無效值
this.$element('map').getScale({
success: res => {
this.scale = res.scale
}
})
prompt.showToast({ message: '控制元件：縮小地圖' })
break
default:
break
}
}
}
</script>
map組件參考：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-map
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/412957.html
標籤：其他