map组件如何展示marker的callout气泡

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<template>

  <div>

    <map

      style="width:{{width}}; height:{{height}}"

      scale="{{scale}}"

      markers="{{markers}}"

    >

    </map>

  </div>

</template>

<script>

  const COORDTYPE = 'wgs84'

  const MARKER_PATH = '/Common/marker.png'

  const BEI_JING_WGS = {

    latitude: 39.9073728469,

    longitude: 116.3913445961,

    coordType: COORDTYPE

  }

  export default {

    private: {

      scale: 17,

      markers: [

        {

          width: '100%',

          height: '50%',

          latitude: BEI_JING_WGS.latitude,

          longitude: BEI_JING_WGS.longitude,

          coordType: BEI_JING_WGS.coordType,

          iconPath: MARKER_PATH,

          width: '100px',

          callout: {

            content: '这里是\n北京',

            padding: '20px 5px 20px 5px',

            borderRadius: '20px',

            textAlign: 'left',

            display: 'always'

          }

        }

      ]

    }

  }

</script>