教你如何在 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>