Teach you how to add custom controls to a map

Requirements describe

Developers can add custom controls on the map component that can respond to click events .

Implementation analysis

This example places two control buttons on the map component to zoom in and out of the map display level , Click the control button , Trigger the control click event of the map component , adopt id Identify the clicked control , Then carry out logical processing respectively .

Sample screenshot ：

resolvent

The code is as follows ：

<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++          //  Because the zoom level of the map has an upper limit , Prevent continuous generation of invalid values           this.$element('map').getScale({            success: res => {              this.scale = res.scale            }          })          prompt.showToast({ message: ' Control ： Zoom in on the map ' })          break        case 2:          this.scale--          //  Because the zoom level of the map has a lower limit , Prevent continuous generation of invalid values           this.$element('map').getScale({            success: res => {              this.scale = res.scale            }          })          prompt.showToast({ message: ' Control ： Reduce the map ' })          break        default:          break      }    }  }</script>

map Component reference ：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-map

More highlights , Please see the official Huawei Developer Forum →https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang