共计 1478 个字符，预计需要花费 4 分钟才能阅读完成。
需要形容
开发者可能在地图组件上增加能够响应点击事件的自定义控件。
实现剖析
该示例在地图组件上搁置了两个用来放大和放大地图显示级别的控件按钮，点击控件按钮，触发地图组件的控件点击事件，通过 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/…
更多精彩内容，请见华为开发者官方论坛→https://developer.huawei.com/…
正文完
