关于android:教你如何在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>

map 组件参考：

https://developer.huawei.com/…

更多精彩内容，请见华为开发者官方论坛→https://developer.huawei.com/…