|
在map组件中放置两个用来放大和缩小地图显示级别的控件按钮，点击控件按钮，触发map组件的控件点击事件，通过 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>
| 
